Question

我正在使用角材料表。我有一个这样的数组：

[ {"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>

更有角度的方法是使用管道，一个简单的版本（只有连接部分），就像：

@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>

我如何迭代列角度表的数组

2 个答案: