用数组填充 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'
    }
  ];
}