如何迭代列数组 angular table

Question

我正在使用 angular-material table。我有一个这样的数组：

[ {"name": "name1", "category": [{ "id": "c1", "name":"cat1"}, {"id": "c2", "name":"cat2"]}]

我在 component.ts:

中有这段代码

export class ListComponent implements OnInit {

  displayedColumns: string[] = ['name', 'category'];
  dataSource: any;

  constructor( private itemService: ItemService ) { }

  ngOnInit(): void {

    this.listService.getAllItems().subscribe(
      res => {
        this.dataSource = new MatTableDataSource(res);
      }
    )
  }

}

这是html:

  <mat-card>
    <table mat-table [dataSource]="dataSource" 
           class="mat-elevation-z8"
    >

      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>

      <!-- Category Column -->
      <ng-container matColumnDef="category">
        <th mat-header-cell *matHeaderCellDef> Category </th>
        <td mat-cell *matCellDef="let element" > {{element.category }} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

      <!-- Row shown when there is no matching data. -->
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" colspan="3"></td>
      </tr>
    </table>
    
  </mat-card>

我的观点是元素类别显示为对象，我希望显示数组的所有项目而不是 [object]。我想显示所有用逗号分隔的类别项目。我该怎么做？

我希望类别显示如下：

Name1     cat1, cat2, cat3
Name2     cat1, cat2, cat3, cat4
Name3     ca1, and so on.

Answer 1

您没有指定要如何显示数组中的项目，例如，如果您想显示以逗号分隔的名称，您可以执行以下操作：

  <ng-container matColumnDef="category">
    <th mat-header-cell *matHeaderCellDef> Category </th>
    <td mat-cell *matCellDef="let element" > {{element.category.map(c => c.id).join(", ") }} </td>
  </ng-container>

更多的angular方法是使用管道，一个简单的版本（只有连接部分）类似于：

@Pipe({
  name: "join"
})
export class JoinPipe implements PipeTransform {
  transform(input: Array<any>, sep = ", ", map: string): string {
    return input.map(i => i[map]).join(sep);
  }
}

用法如下：

<td mat-cell *matCellDef="let element" > {{ element.category |join:', ':'name' }} </td>

这是一个demo

Answer 2

在您的模板中，您可以执行以下操作

  <mat-card>
    <table mat-table [dataSource]="dataSource" 
           class="mat-elevation-z8"
    >

      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>

      <!-- Category Column -->
      <ng-container matColumnDef="category">
        <th mat-header-cell *matHeaderCellDef> Category </th>
        <td mat-cell *matCellDef="let element" > 
            <span *ngFor="let cat of element.category">{{cat.name}} , </span>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

      <!-- Row shown when there is no matching data. -->
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" colspan="3"></td>
      </tr>
    </table>
    
  </mat-card>

如何迭代列数组 angular table

HOw can I iterate array of a column angular table

angular-material

angular

angular-material-table