带嵌套接口的angular MAT-TABLE绑定数据不工作

尝试绑定来自JSON-SERVER的数据错误:无法找到id为" modulen"的列

测试数据

{
"modules": [
{
"Id": 0,
"ModuleNm": "Visa",
"UploadDttm": "01/14/2019 21:27",

},
{
"Id": 0,
"ModuleNm": "Visa",
"UploadDttm": "01/14/2019 21:28",
},
]

<我的接口/strong>

export interface IModuleType {
modules: Module[];
}
export interface Module {
Id:             number;
ModuleNm:       ModuleNm;
UploadDttm:     string;

}

loadData(selectedModuleType: string): Observable<any>{
return this._http.get<IModuleType[]>(this.testData );
}

<组件/strong>

displayedColumns: string[] = ['ModuleNm', 'UploadDttm',];
dataSource!: MatTableDataSource<IModuleType>;
getData(selectedModule: string): void {
console.log('loadModuleData mothod :::::>', selectedModule);
this.test.loadData(selectedModule).subscribe({
next: (resp) => {
console.log('RESPONSE IN COMPONENT', typeof resp, resp); // getting object 
this.dataSource = resp;

},
error: (err: any) => {
console.log('Errors :::>', err);
},
complete: () => {
console.log('request completed');
},
});
}

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

<ng-container matColumnDef="ModuleNm">
<th mat-header-cell *matHeaderCellDef> Type </th>
<td mat-cell *matCellDef="let element"> {{element[0].modules.ModuleNm}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

有人能帮我理解为什么我得到这个错误吗?

DataSource接受一个对象数组。你的数据似乎是一个对象，其单一属性是一个数组-它不会这样工作。您需要指定实际的数组作为数据源。

你可以，例如，改变你给数据源分配数据的方式:

// Change the data type of datasource dataSource!: MatTableDataSource<Module>; // Change the assignment within subscription this.dataSource = new MatTableDataSource(resp.modules);
然后，在模板中，element将表示modules数组中的一个项目，因此，例如，对于type列，将其更改为:

<td mat-cell *matCellDef="let element"> {{element.ModuleNm}} </td>

相关内容

最新更新

热门标签：