角度材料數據表。 如何放置動態表（數組中的數組）？

Question

我有一組數據。 我想放入一個數據表，但數組中有數據數組。 我不知道我該怎么做，我用 *ngFor 想過，但我不知道應該把它放在哪里。

我想展示

codigo | nombre (departamento) | estacion (nombre) | mes | año | Tmaxima 

在每個部門中，每個部門都有很多 estacion，每個 estacion 都有很多數據，例如“mes、ano 和 Tmaxima”

https://stackblitz.com/edit/angular-6wdz2u?file=src%2Fapp%2Fapp.component.ts中的代碼

我會告訴你代碼。 這是一個例子，因為我得到的數據是一個BD。

表組件：

export class AppComponent {
datos= [{
codigo: 1,
departamento: "Tolima",
estaciones: [
  {
    nombre: "Estacion 1",
    latitud: "la1",
    longitud: 232,
    datos: [{ mes: 1, ano: 1983, Tmaxima: 32 }, { mes: 2, ano: 1983, 
Tmaxima: 32 }]
  },
  {
    nombre: "Estacion 2",
    latitud: "la2",
    longitud: 232,
    datos: [{ mes: 1, ano: 1990, Tmaxima: 32 }, { mes: 2, ano: 1990, 
 Tmaxima: 32 }]
  }
]
}, {
  codigo: 2,
  departamento: "Other",
  estaciones: [
    {
      nombre: "Estacion 1 other",
      latitud: "la1",
      longitud: 232,
      datos: [{ mes: 1, ano: 1983, Tmaxima: 32 }, { mes: 2, ano: 1983, 
 Tmaxima: 32 }]
    },
    {
      nombre: "Estacion 2 other",
      latitud: "la2",
      longitud: 232,
      datos: [{ mes: 1, ano: 1990, Tmaxima: 32 }, { mes: 2, ano: 1990, 
  Tmaxima: 32 }]
    }
   ]
 }
 ] 
displayedColumns: string[] = ["codigo", 
"nombre","estacion","mes","ano","Tmaxima"]
listaData: MatTableDataSource<any>

constructor() {
this.listaData = new MatTableDataSource(this.datos);
}

}

HTML:

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

<ng-container matColumnDef="nombre">
  <mat-header-cell *matHeaderCellDef >Nombre</mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.departamento}} </mat- 
cell>
</ng-container>

 <ng-container matColumnDef="codigo">
  <mat-header-cell *matHeaderCellDef >Codigo</mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.codigo}} </mat-cell>
 </ng-container>

 <ng-container matColumnDef="estacion">
  <mat-header-cell *matHeaderCellDef >Estacion</mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.estaciones[0].nombre}} 
 </mat-cell>      
 </ng-container>

  <ng-container matColumnDef="mes">
  <mat-header-cell *matHeaderCellDef >Mes</mat-header-cell>
  <mat-cell *matCellDef="let element">   </mat-cell>
 </ng-container>

 <ng-container matColumnDef="ano">
  <mat-header-cell *matHeaderCellDef >Año</mat-header-cell>
  <mat-cell *matCellDef="let element">   </mat-cell>
  </ng-container>

 <ng-container matColumnDef="Tmaxima">
  <mat-header-cell *matHeaderCellDef >Tmaxima</mat-header-cell>
  <mat-cell *matCellDef="let element">  </mat-cell>
 </ng-container> 

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

我找到的唯一解決方案是：將數據轉換為

    data2=[ {codigo:"",  
     departamento:"",   
     estacion:"",   
     nombre:"",
     latitud:"",
     longitud:"",
     ano:"",
     mes:"",
     Tmaxima:"" } ]

這樣我就可以在html中獲取數據......但是這種方式並不好..

Answer 1

嵌套 ngFor 循環是可能的——下面是一個在簡單的 HTML 表格中顯示一些數據的例子，所以很清楚發生了什么：

<table>
    <tr *ngFor="let dato of datos">
        <td>{{dato.departamento}}</td>
        <td>
            <table>
                <tr *ngFor="let estacione of dato.estaciones">
                    <td>{{estacione.nombre}}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

我已將此示例添加到Stackblitz 。 希望這些信息足以為您指明正確的方向——原理與墊子桌完全相同。

您將使用以下代碼將嵌套表添加到材料表中的單元格：

<ng-container matColumnDef="InnerTable">
    <mat-header-cell *matHeaderCellDef >Estaciones</mat-header-cell>
    <mat-cell *matCellDef="let element">
        <table>
            <tr *ngFor="let estacione of element.estaciones">
                <td>{{estacione.nombre}}</td>
            </tr>
        </table>
    </mat-cell>
</ng-container>

然后將“InnerTable”添加到您的列定義中：

displayedColumns: string[] = ["codigo", "nombre","estacion","mes","ano","Tmaxima","InnerTable"]

Stackblitz在這里。 您可以使用第二個材料表，但我認為這在視覺上會很忙。 除非你真的需要它，否則我只會使用標准的 HTMl 表格。