尝试在包含另一个对象的对象上使用 Angular Material table

Question

所以基本上我在 Angular 中定义了一个接口，看起来像这样：

export interface product {
   brand: String,
   type: String,
   value: number,
   fields: Rating[]
}

字段属性是一个评级对象数组，关键是用户可以向字段属性添加许多评级。问题是我不知道如何从本质上将这个对象展平到 table 上，以便所有字段都显示为另一列。

     brand   type   value   field1   field2   field3

row1

row2

目前我有 html 模板遍历产品对象，尽管当您点击字段时它会按照您的想法进行操作并为您提供 [Object object]、[Object object] 列.有没有一种方法可以在我当前的循环中有另一个嵌套循环……或者类似的东西。当前 table 代码如下所示。

<mat-table [dataSource]="data">
   <ng-container *ngFor="let col of columns" matColumnDef="{{col}}">
      <mat-header-cell *matHeaderCellDef>{{ col }}</mat-header-cell>

      <mat-cell *matCellDef="let element">
         {{ element[col] }}
      </mat-cell>
   </ng-container>

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

如有任何帮助，我们将不胜感激。

Answer 1

根据您希望如何在 table 中查看结果，您必须在将数据发送到 table 之前对其进行操作。如果您不能确定总会有 3 个字段，您可能需要重新考虑您的设计，以便为每一行重复其原始数据。

对于这种情况，您可能会寻找这样的东西：

let newlist=[];
fetchdata.subscribe(results=>{
    results.foreach(r=>{
        newlist.push({
            brand: r.brand,
            type: r.type,
            value: r.value,
            fields1: r.rating[0],
            fields2: r.rating[1],
            fields3: r.rating[2]
        });
    })
})

<mat-table [dataSource]="newlist">

Answer 2

LotteLemmens 在您的服务中使用管道映射的相同想法：

this.httpClient.get(...).pipe(map(data:any[]=>{
   return data.map(r=>({
        brand: r.brand,
        type: r.type,
        value: r.value,
        fields1: r.rating[0],
        fields2: r.rating[1],
        fields3: r.rating[2]
   }))
}))

另一个想法是简单地使用 {{col.indexOf('fields')>0?element[col][+col[6]-1]:element[col]}} (*)

       <ng-container *ngFor="let col of columns" matColumnDef="{{col}}">
          <mat-header-cell *matHeaderCellDef>{{ col }}</mat-header-cell>
    
          <mat-cell *matCellDef="let element">
             {{col.indexOf('fields')>=0?element[col][+col[6]-1]:element[col]}}
          </mat-cell>
       </ng-container>

(*) 当我们在字符串上使用 variable[4] 获取第 5 位的字符时，我们转换为数字（添加 + 并减去 1）-通常我们的字段更喜欢 fields0 , fields1 和 fields2 避免了“减去”，但是我们选的是.

另一种方法是使用变量 columnsWihoutFields

  columnsWihoutFields="brand,type,value"

并做两个循环：

      <!--loop over columnsWithoutFields-->
      <ng-container *ngFor="let col of columnsWihoutFields" matColumnDef="{{col}}">
          <mat-header-cell *matHeaderCellDef>{{ col }}</mat-header-cell>
    
          <mat-cell *matCellDef="let element">
             {{ element[col] }}
          </mat-cell>
       </ng-container>
      <!--loops to show the fields-->
      <ng-container *ngFor="let col of [1,2,3]" matColumnDef="{{'fields'+col}}">
          <mat-header-cell *matHeaderCellDef>{{ 'fields'+col}}</mat-header-cell>
          <mat-cell *matCellDef="let element">
             {{ element.ratting[col] }}
          </mat-cell>
       </ng-container>

注意：我想您的列是“brand,type,value,field1,field2,field3”

尝试在包含另一个对象的对象上使用 Angular Material table

Trying to use Angular Material table on object that contains another object

angular-material

angular

angular-material-table