Primeng 表格组件不适用于 ngFor

Question

我正在尝试循环一个数组，该数组中的每个对象都是 html 上的一个表。 它显示如下：

<p-table [value]="section" *ngFor="let section of sections">
  <ng-template pTemplate="header">
          <tr>
              <th>Quantity</th>
              <th>Length</th>
              <th>m^2</th>
              <th></th>
          </tr>
          <tr>
              <th colspan="4">
                  <div (click)="showDialog()" class="text-left">+ A - Flat Panel RAW MDF Red Gloss
                      - $95 / sqm
                  </div>
              </th>
              <th colspan="8">
                  <div class="md-inputfield">
                      <input type="text" class="form-control" pInputText>
                  </div>
              </th>
          </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData *ngFor="let piece of rowData.Pieces">
          <tr>
              <td>
                  <p-spinner [(ngModel)]="rowData.Quantity"></p-spinner>
              </td>
              <td pEditableColumn>
                  <p-cellEditor>
                      <ng-template pTemplate="input">
                          <input type="text" [(ngModel)]="rowData.Length">
                      </ng-template>
                      <ng-template pTemplate="output">
                          {{rowData.Length}}
                      </ng-template>
                  </p-cellEditor>
              </td>
              <td>
                  {{CalculateTotalArea(rowData)}}
              </td>
              <td>
                  <button pButton type="button" icon="fa-close"></button>
              </td>
          </tr>
      </ng-template>
</p-table>

但这给了我一个错误this.value.sort is not a function，这里是数组

this.pieces = [{ Quantity: 2, Length: 3, Width: 3, Thickness: 4 }]

this.sections = [ { Pieces: this.pieces, text: "abc" } ]

我正在尝试将代码推送到 Plunker，但我不知道如何将primeng 的版本升级到"primeng": "^5.2.0-rc.1",，那么 Plunker 现在无法工作 任何人都帮我更新primeng库并建议我如何解决这个错误。 这是链接 Plunker：Plunker

Answer 1

这是因为，p-table 需要一个通过 value 的数组，但是你正在传递 { Pieces: this.pieces, text: "abc" } 导致错误。要么你必须删除 *ngFor="let section of sections" 并像这样传递你的数组 <p-table [value]="sections"> 或者如果你真的想在你的页面中有一堆表格，你的 sections 数组应该如下所示（多维）：

// for the sake of simplicity, I named your objects as 'item'
this.sections = [
    [item1, item2, item3],
    [item10, item11, item12],
    [item15, item50, item32]
]