angular - 在角度材质表中显示api数据
问题描述
我尝试在角度材料表组件中显示来自 json 文件的数据,但我不能。
app.component.ts
ELEMENT_DATA: Itype[];
displayedColumns: string[] = ['dechets.bouteille_plastique'];
dataSource = new MatTableDataSource<Itype>(this.ELEMENT_DATA); // probleme is here
constructor(private authService: AuthenticationService) { }
ngOnInit() {
this.getAllDetails();
}
public getAllDetails() {
let resp = this.authService.getDetails();
resp.subscribe(report => this.dataSource.data=report as Itype[])
}
界面
export interface Itype {
type_collecte: string;
dechets: {
bouteille_plastique: number;
}
}
json.file
{
"type collecte": "reccurente",
"dechets": {
"bouteille_plastique": 2.9,
},
},
我不知道我是否在html中做对了
html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="dechets.bouteille_plastique">
<th mat-header-cell *matHeaderCellDef>Type de dechets</th>
<td mat-cell *matCellDef="let element">{{element.dechets.bouteille_plastique}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
解决方案
正如您提供的评论所指出的那样:“在初始化之前使用属性'ELEMENT_DATA'”,这意味着ELEMENT_DATA在用于定义数据源时未初始化。
您只需将类中的 ELEMENT_DATA 定义更改为:
ELEMENT_DATA: IType[] = [];
这样,当组件实例化时,它可以使用空数组作为值来初始化 dataSource 对象。
推荐阅读
- vba - 如何在 Word 中选择文本并使用 vba 将其转换为堆积分数?
- dagger-hilt - 使用 Hilt 处理功能模块的子模块
- wordpress - 如何将 mod 标头添加到由 wp-env 运行的 docker 容器中?
- python - python3中的multi-var except语句上的Python无效语法
- postgresql - Postgres barman pg 创建还原点导致长锁
- flutter - 没有为类型“_CalendarState”定义方法“Utils”。尝试将名称更正为现有方法的名称
- python - 通过 HTTP WEB API 将数据放在 HDFS 上
- python - 文件夹名称中的数字在 os makedirs 中返回错误
- image - 如何在容器中心添加圆形图像
- mysql - 我无法在 EasyAdmin3 Symfony4 中上传照片