Angular 14 -从JSON动态创建多个表

Question

我想循环遍历一个JSON，像这样

[
{
"name": "TESTING",
"steps": [
{
"i": "35%",
"ii": "65%",
}
]
},
{
"name": "TESTING",
"steps": [
{
"i": "35%",
"ii": "65%",
}
]
}
]

然后从这个json我将创建一个表"TESTING"作为第一行，并以步骤及其各自的编号i, ii…。

就像这样，

TESTING
i      35%

我的第一个想法是在这样的桌子上使用*ngFor<table *ngFor="let object of json">但是，我如何动态地将数据源附加到每个表呢?

如果这看起来毫无意义，我同意，我正在寻找更好的方法来呈现这些数据，但这是现在必须做的。

Answer 1

您可以采用几种不同的方法来实现这种模式。

可以很好地利用ngTemplateOutlet &ngTemplateOutletContext指令用于"搭建"模板中的mat表，并将数据作为context传递…类似于这个方法来开始:

@Component({
selector: 'app-table-component',
template: `
<div>
<ng-container
[ngTemplateOutlet]="tmpl"
[ngTemplateOutletContext]="ctx">
</ng-container>
<!-- Your table structure insice this template   -->
<template #tmpl let-name let-location="location">
{{ name }} : {{ location }}
</template>
</div>
`
})
export class TableComponent {
ctx = {
name: 'This is a test',
location: 'Some location'
};
}

您可以想象使用此组件定义单个表，然后在循环中迭代地定义app-table-components，将ctx数据作为输入传递。

Answer 2

席表数据源可以是一个对象数组(问题是我们不能如此容易地排序或分页)

<mat-table *ngFor="let object of json" [dataSource]="object.steps">
</mat-table>

如果我们需要给一个MatTableDataSource没有问题。我们创建了垫子，在ngafterviewit中，使用ViewChildren获取垫子并给matdatasource赋值

<!--see that we don't give dataSource-->
<mat-table *ngFor="let object of json" >
</mat-table>
@ViewChildren(MatTable) tables:QueryList<MatTable<any>>
ngAfterViewInit(){
this.tables.forEach((x:MatTable<any>,index:number)=>{
x.dataSource=new MatTableDataSource(this.json[index].items)
})
}

一个简单的stackblitz