用数组填充PrimeNG表

Question

我是Angular和PrimeNG的新手，目前我正在尝试填充表。控制台没有错误，所以可能我只是错过了一些东西，但我不知道是什么。下面是代码:

在component.ts

...
columns: Column[] = [];
first = 0;
rows = 20;
tasks = [
{
id: 'Task 1',
name: 'Start task 1',
start: '2021-11-08',
end: '2021-11-15',
progress: 80,
dependencies: 'Task 3, Task 4'
},
{
id: 'Task 2',
name: 'Start task 2',
start: '2021-11-18',
end: '2021-12-02',
progress: 20,
dependencies: 'Task 1'
}
];
ngOnInit() {
const columns = ['Id', 'Name', 'Start', 'End', 'Progress', 'Dependencies'];
}
public onPageChange(event: any): void {
this.first = event.first;
this.rows = event.rows;
}
...

在component.html

...
<p-table styleClass="sticky-table" #TasksTable [autoLayout]="true" [value]="tasks" selectionMode="single" [paginator]="true" [rows]="rows" [columns]="columns" [rowsPerPageOptions]="[10,20,50,100,200]" [first]="first" (onPage)="onPageChange($event)" [style]="{width:'100%'}"
sortMode="multiple" [reorderableColumns]="true" [resizableColumns]="true">
<ng-template pTemplate="header">
<tr id="sticky-header">
<th class="flex-header" *ngFor="let col of columns" [pSortableColumn]="col.field" pResizableColumn pReorderableColumn>
<span>
<p-sortIcon [field]="col.field"></p-sortIcon>
{{col.header}}
</span>
<p-columnFilter [showIcon]="false" operator="or" [type]="!col.type ? 'text' : col.type" display="menu" [field]="col.field"></p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-tasks>
<tr [pSelectableRow]="tasks">
<ng-container *ngFor="let col of columns">
<td>
<ng-container>
{{tasks[col.field]}}
</ng-container>
</td>
</ng-container>
</tr>
</ng-template>
<ng-template pTemplate="paginatorright">
<p-button icon="pi pi-refresh" (onClick)="refresh()" [pTooltip]="'common.refresh'" tooltipPosition="bottom" showDelay="300"></p-button>
</ng-template>
</p-table>
...

我只想用硬编码的任务数组填充p表(可能不是最佳实践，但我现在只是在测试，我需要使其工作)。

提前感谢!

Answer 1

您需要修改您的columns变量，如下所示，

cols: any[];
ngOnInit() {
this.cols = [{
field: 'id',
header: 'Id'
},
{
field: 'name',
header: 'Name'
},
{
field: 'start',
header: 'Start'
},
{
field: 'end',
header: 'End'
},
{
field: 'progress',
header: 'Progress'
},
{
field: 'dependencies',
header: 'Dependencies'
}
];
}