角材料数据表如何放置动态表(数组中的数组)？
角材料数据表如何放置动态表(数组中的数组)？
提问于 2019-04-15 15:54:11
我有一大堆数据。我想输入datatable，但是数组有数组数据。我不知道该怎么做，我用*ngFor想，但我不知道该把它放在哪里。
我想展示一下
codigo | nombre (departamento) | estacion (nombre) | mes | año | Tmaxima 在每个部门中，每个部门都有大量的estacion，每个部门都有大量的数据，比如"mes，ano和Tmaxima“。
https://stackblitz.com/edit/angular-6wdz2u?file=src%2Fapp%2Fapp.component.ts中的代码
我给你看密码。这是一个例子，因为我得到的数据是BD。
TableComponent :
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中得到数据..。但这样不太好..。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-15 16:15:30
嵌套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>我已将此示例添加到斯塔克布利茨中。希望这将是足够的信息，指出你在正确的方向-原则将完全相同的垫桌。
您可以使用以下代码向“材料表”中的单元格中添加嵌套表：
<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表。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55692998
复制相关文章
相似问题
腾讯云开发者
