用一個陣列來填充PrimeNG表

我是Angular和PrimeNG的新手，目前我在嘗試填充一個表格時卡住了。控制臺中沒有錯誤，所以我可能只是錯過了一些東西，但我不知道是什么。以下是代碼：

在 component.ts 中

...

columns。Column[] = [] 。
first = 0;
rows = 20;
任務 = [
    {
      id: 'Task 1',
      name: '啟動任務1'。
      start: '2021-11-08',
      end: '2021-11-15',
      進度: 80,
      dependencies: '任務3，任務4'。
    },
    {
      id: '任務2'。
      name: '啟動任務2'。
      start: '2021-11-18',
      end: '2021-12-02',
      進度: 20,
      dependencies: '任務1'。
    }
  ];

ngOnInit（）{
    const columns = ['Id', 'Name', 'start', 'End', 'Progress', 'Dependencies'] 。
}

public onPageChange（event: any）。void {
    this.first = event.first。
    this.rows = event.rows。
  }

...

在組件.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">/span>
                    < th class="flex-header"/span> *ngFor="let col of columns" [pSortableColumn] ="col. field" pResizableColumn pReorderableColumn>。
                        <span> 
                                <p-sortIcon [field]="col. field"></p-sortIcon>/span>
                                {{col.header}}
                            </span>{{col.header}}。
                        < p-columnFilter [showIcon]="false"/span> operator="or" [type]="! col.type ? 'text' : col.type" display="menu" [field] ="col. field"></p-columnFilter>/span>
                    </th> 
                </tr>/span>

            </ng-template>/span>
            <ng-template pTemplate="body"/span> let-tasks>/span>
                <tr [pSelectableRow]="tasks">/span>
                    <ng-container *ngFor="let col of columns"/span>>
                        <td> 
                            <ng-container> 
                                {{任務[col.field]}}。
                            </ng-container>{tasks[col.field]}}.
                        </td>/span>
                    </ng-container>/span>
                </tr>/span>
            </ng-template>>
            <ng-template pTemplate="paginatorright"/span>>
                < p-button icon="pi-refresh" （onClick）="refresh()" [pTooltip]='common. refresh'" tooltipPosition="bottom" showDelay="300"> </p-button>>
            </ng-template>/span>
</p-table>

...

我只是想用一個硬編碼的任務陣列來填充p-table（可能不是最好的做法，但我現在只是在測驗，我需要讓它發揮作用）。

預先感謝！

uj5u.com熱心網友回復：

你需要修改你的columns變數，如下所示，

cols: any[]。

ngOnInit（） {
  this.cols = [{ {
      field: 'id',
      header: 'Id'。
    },
    {
      field: 'name',
      header: 'Name'。
    },
    {
      field: 'start',
      header: 'Start'。
    },
    {
      field: 'end',
      header: '結束'。
    },
    {
      field: 'progress',
      header: 'progress'。
    },
    {
      field: 'dependencies',
      header: '依賴性', header: '依賴性'
    }
  ];
}

標籤：

上一篇：Axios向Django發送OPTIONS而不是POST

下一篇：將專案從Angular11遷移到Angular12后出現錯誤TS2307