Javascript 动态使用Angular6 Mat表
我正在开发一个Angular应用程序,它要求我显示从API检索的数据。因为我不知道要检索什么样的数据,而且这是一个我需要用于不同表的模型,所以我需要使它既能动态生成列,又能填充每个单元格 我检索到并需要在表中打印的JSON与此类似:Javascript 动态使用Angular6 Mat表,javascript,angular,angular-material,Javascript,Angular,Angular Material,我正在开发一个Angular应用程序,它要求我显示从API检索的数据。因为我不知道要检索什么样的数据,而且这是一个我需要用于不同表的模型,所以我需要使它既能动态生成列,又能填充每个单元格 我检索到并需要在表中打印的JSON与此类似: [ { "attributes": [], "brandReference": "f805a08df4c236ddb431e14a38419690", "computedPOS": "BEXFY_HEADQUA
[
{
"attributes": [],
"brandReference": "f805a08df4c236ddb431e14a38419690",
"computedPOS": "BEXFY_HEADQUARTERS",
"deviceType": 1,
"friendlyName": "BEXFY_TRANSPARENT_LED",
"id": "953e9414d7a51e8-e0-681def0b02b5",
"isMonitored": true,
"location": "entrance",
"posReference": "78fcef0f12993d52b2d2906dc4ce48d8",
"timetable": [],
"timezone": "Europe/Madrid"
},
{
"attributes": [],
"brandReference": "185fd549-4410-462b-a610-fe6b61c91cf6",
"comments": "",
"computedPOS": "BEXFY_HEADQUARTERS",
"deviceType": 1,
"friendlyName": "BEXFY_AUDIO_OFICINA",
"id": "79eaa7f5f6603809-e0-681def0b0290",
"location": "",
"posReference": "78fcef0f12993d52b2d2906dc4ce48d8",
"timetable": [],
"timezone": "Europe/Madrid"
},
{
"attributes": [],
"brandReference": "185fd549-4410-462b-a610-fe6b61c91cf6",
"comments": "",
"computedPOS": "BEXFY_HEADQUARTERS",
"deviceType": 1,
"friendlyName": ".BEXFY_AUDIO_ADRI",
"id": "97bf675e3e237bcd-e0-681def0b029f",
"location": "",
"posReference": "78fcef0f12993d52b2d2906dc4ce48d8",
"timetable": [],
"timezone": "Europe/Madrid"
}
]
请注意,对象属性键可能会更改,因此我无法硬编码类似element.friendlyName的内容。我通过如下所示的数组接收应该使用的键名
["friendlyName", "computedPOS", "location"]
<table mat-table [dataSource]="dataSource.data" class="mat-elevation-z8" style="width:90%;margin:0 auto;">
<ng-container *ngFor="let column of modelCols; let colIndex = index" matColumnDef={{nameCols[colIndex]}}>
<th mat-header-cell *matHeaderCellDef> {{nameCols[colIndex]}}</th>
{{log(modelCols)}}
<div *ngFor="let column of modelCols;">
<td mat-cell *matCellDef="let element">
{{log(element[column])}}
{{element[column]}}
</td>
</div>
</ng-container>
<tr mat-header-row *matHeaderRowDef="nameCols"></tr>
<tr mat-row *matRowDef="let row; columns: nameCols;"></tr>
</table>
所以为了让它工作,我做了这样的东西
["friendlyName", "computedPOS", "location"]
<table mat-table [dataSource]="dataSource.data" class="mat-elevation-z8" style="width:90%;margin:0 auto;">
<ng-container *ngFor="let column of modelCols; let colIndex = index" matColumnDef={{nameCols[colIndex]}}>
<th mat-header-cell *matHeaderCellDef> {{nameCols[colIndex]}}</th>
{{log(modelCols)}}
<div *ngFor="let column of modelCols;">
<td mat-cell *matCellDef="let element">
{{log(element[column])}}
{{element[column]}}
</td>
</div>
</ng-container>
<tr mat-header-row *matHeaderRowDef="nameCols"></tr>
<tr mat-row *matRowDef="let row; columns: nameCols;"></tr>
</table>
这样做的问题是,它会在行的每一列上重复第一个值friendlyName。像这样的
["friendlyName", "computedPOS", "location"]
<table mat-table [dataSource]="dataSource.data" class="mat-elevation-z8" style="width:90%;margin:0 auto;">
<ng-container *ngFor="let column of modelCols; let colIndex = index" matColumnDef={{nameCols[colIndex]}}>
<th mat-header-cell *matHeaderCellDef> {{nameCols[colIndex]}}</th>
{{log(modelCols)}}
<div *ngFor="let column of modelCols;">
<td mat-cell *matCellDef="let element">
{{log(element[column])}}
{{element[column]}}
</td>
</div>
</ng-container>
<tr mat-header-row *matHeaderRowDef="nameCols"></tr>
<tr mat-row *matRowDef="let row; columns: nameCols;"></tr>
</table>
虽然预期的工作方式是:
您需要在nameCols上循环以显示动态列。API要求您显示的任何列都是您需要迭代以显示列的全部内容。因为您正在使用元素[column]来显示行中的项目。它将只显示所需的项目 {{column}} {{元素[列]}}
下面是一个使用您的数据的工作示例。这样,即使API中有一组不同的列要显示,您所需要做的就是更新nameCols以显示正确的列。模板将处理其余部分,并将相关数据显示到显示的列中。与其添加控制台的图像,不如将实际数据与相关组件代码一起添加到问题中。更好的方法是,在StackBlitz上添加一个您尝试过的示例。不能完全分享我的尝试,但主要是我已经在op上展示的。