我将使用primeng创建一个动态表。
当我加载应用程序时，turbo表为空，但是当我单击分页按钮或呈现标题数据时。
<div class="">
<p-table #tt [value]="files" selectionMode="single" sortMode="single" [(selection)]="selectedUser" dataKey="name" [globalFilterFields]="['uid','firstName','lastName']" (onRowSelect)="selectedUserDetails($event)" styleClass="tab-result" [paginator]="true" [rows]="10" [first]="first">
<ng-template pTemplate="caption">
<div style="text-align: right">
<i class="fa fa-search" style="margin:4px 4px 0 0"></i>
<input type="text" pInputText size="50" placeholder="Global Filter" (input)="tt.filterGlobal($event.target.value, 'contains')" style="width:auto">
</div>
</ng-template>
<ng-template pTemplate="header">
<tr >
<th *ngFor="let col of cols" [pSortableColumn]="col.field" >{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-file>
<tr [pSelectableRow]="file">
<td *ngFor="let col of cols"> {{file[col.field]}}</td>
</tr>
</ng-template>
</p-table>
</div>
TS文件
export class DataTableComponent implements OnInit {
cols;
files;
constructor(private creditPointService: CreditPointService) { }
ngOnInit() {
console.log("test");
this.cols = [
{ field: "name", header: "Name" },
{ field: "scope", header: "First Name" },
{ field: "finalDecisionDate", header: "Final Decision Date" },
{ field: "typeOfRequest", header: "Type Of Request" }
];
this.files=this.creditPointService.getResults();
console.log(this.files)
/* this.creditPointService.getResults().toPromise().then(
data => {
console.log("la data", data);
var test = data;
this.files = test;
},
err => {
console.log(err);
}
);*/ Service should handle getting data in real example
}
}
每次显示数据时，我应该单击分页或标题项，但是预期的行为是在加载应用程序后显示数据。