angular - Primeng - 无法在列中显示数组项

Question

我在 Angular 2 中使用 primeng datable。我的模型是一个产品数组。每个产品都有一组位置。该位置数组有一个属性 name 。如何在产品行中显示位置数组的每个名称？

示例:如果第一个 product 在其 locations 数组中有 5 个 name，则它应在位置列

目前我正在这样做。

<p-dataTable [value]="products" selectionMode="single" [(selection)]="selectedProduct" (onRowSelect)="onRowSelect($event)" [paginator]="true" rows="5" [responsive]="true">
              <p-column field="name" header="Name" [sortable]="true"></p-column>
              <p-column field="model" header="Model" [sortable]="true"></p-column>
              <p-column field="name" header="Quantity" [sortable]="true"></p-column>
              <p-column field="locations.location.name" header="Locations" [sortable]="true">
              </p-column>
            </p-dataTable>

Answer 1

您应该为该特定列使用 ngFor 检查下面的代码

<p-dataTable [value]="products" selectionMode="single" [(selection)]="selectedProduct" (onRowSelect)="onRowSelect($event)" [paginator]="true" rows="5" [responsive]="true">
              <p-column field="name" header="Name" [sortable]="true"></p-column>
              <p-column field="model" header="Model" [sortable]="true"></p-column>
              <p-column field="name" header="Quantity" [sortable]="true"></p-column>
              <p-column field="locations" header="Locations" [sortable]="true">
                    <ng-template let-col let-locations="rowData" let-ri="rowIndex" pTemplate="body">
                        <span *ngFor="let item of locations.location">{{item.name}} <br/></span>
                    </ng-template>
              </p-column>             
</p-dataTable>