API响应数据未显示在DOM中

Question

如您所见，我正在调用一个服务，响应数据绑定到ELEMENT_data变量。但硬记录的值仅显示在UI中。API响应数据未显示。当我在控制台时，ELEMENT_DATA响应数据已经存在。但它不是在UI上渲染的。我在这里犯了什么错误。

我正在为ui使用Angular和Angular材质。

import { Component, OnInit } from '@angular/core';
import { EnumsDataService } from '@app/management/services/enums/enums-data.service';
export interface PeriodicElement {
inventoryId: string;
inventoryName: string;
}
@Component({
selector: 'app-test-comp',
templateUrl: './test-comp.component.html',
styleUrls: ['./test-comp.component.scss']
})
export class TestCompComponent implements OnInit {
// data:any=[];
ELEMENT_DATA: PeriodicElement[] = [
{inventoryId: "1", inventoryName: 'Hydrogen'},
{inventoryId: "2", inventoryName: 'Helium',},
];
constructor(private _EnumsDataService: EnumsDataService) { }
ngOnInit(): void {
this.getInventoryTypes();
}
getInventoryTypes() {
this._EnumsDataService.getInventoryTypes().then((res:any) => {
// this.inventoryTypes = _.concat([this.allTypes], res);
console.log(res)
res.map((item:any)=>{
let obj={
inventoryId:item.invTypeId,
inventoryName:item.invTypeName
}
this.ELEMENT_DATA.push(obj)
}) 
});
console.log("ELEMENT_DATA---------------",this.ELEMENT_DATA)
}
displayedColumns: string[] = ['inventoryId', 'inventoryName'];
dataSource = this.ELEMENT_DATA;
}

UI 的角度材料代码

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="inventoryId">
<th mat-header-cell *matHeaderCellDef> invId. </th>
<td mat-cell *matCellDef="let element"> {{element.inventoryId}} </td>
</ng-container>

<ng-container matColumnDef="inventoryName">
<th mat-header-cell *matHeaderCellDef> invName </th>
<td mat-cell *matCellDef="let element"> {{element.inventoryName}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Answer 1

您的问题的解决方案可以在angular material文档中找到(https://material.angular.io/components/table/overview#getting-已启动(：

由于表针对性能进行了优化，因此它不会自动检查数据数组的更改。相反，当在数据数组上添加、删除或移动对象时，可以通过调用其renderRows((方法来触发对表的渲染行的更新。

您可以将then函数的内容更改为以下内容：

this.dataSource = [
...this.ELEMENT_DATA, 
...res.map((item:any) => ({
inventoryId:item.invTypeId,
inventoryName:item.invTypeName
})
)
]

通过这种方式可以创建一个新数组。Angular将注意到参照已更改，并将相应地检测到更改。当然，您也可以调用renderRows函数来手动触发它。

注意：我不确定您是否了解数组上的map函数是如何工作的。forEach的使用方式更有意义，因为您没有从函数中返回元素。

Answer 2

在获得触发更改检测的响应并呈现新内容后，需要重新分配dataSource

export class TestCompComponent implements OnInit {
ELEMENT_DATA: PeriodicElement[] = [
{ inventoryId: "1", inventoryName: 'Hydrogen' },
{ inventoryId: "2", inventoryName: 'Helium', },
];
displayedColumns: string[] = ['inventoryId', 'inventoryName'];
dataSource = this.ELEMENT_DATA;
constructor(private _EnumsDataService: EnumsDataService) { }
ngOnInit(): void {
this.getInventoryTypes();
}
getInventoryTypes() {
this._EnumsDataService.getInventoryTypes().then((res: any) => {
// this.inventoryTypes = _.concat([this.allTypes], res);
console.log(res)
res.map((item: any) => {
let obj = {
inventoryId: item.invTypeId,
inventoryName: item.invTypeName
}
this.ELEMENT_DATA.push(obj)
})
this.dataSource = [...this.ELEMENT_DATA];
});
console.log("ELEMENT_DATA---------------", this.ELEMENT_DATA)
}
}