Question

我有一个数据数组。我想放入一个数据表，但该数组具有数据数组。我不知道该怎么做，我想着一个* ngFor，但我不知道该把它放在哪里。

我想展示

@Component
public class NameClientFactory {
    public <T> T createFeignClient(Class<T> clientClass, String apiUrl) {
        return Feign.builder()
                .encoder(new GsonEncoder())
                .decoder(new GsonDecoder())
                .target(clientClass, apiUrl);
    }
}

每个部门都有每个部门，每个部门都有很多数据，例如“ mes，ano和Tmaxima”

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

中的代码

我将向您显示代码。这是一个示例，因为我得到的数据是BD。

TableComponent：

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

HTML：

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);
}

}

我发现的唯一解决方案是：转换

中的数据

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

通过这种方式我可以在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 here。您可以使用第二个Material表，但是我认为这在外观上非常忙。除非您真的需要它，否则我将只使用标准的HTMl表。

角度材料数据表。我怎样才能放置动态表（数组在数组中）？

1 个答案: