angular - 无法绑定到 mat-table 中的数据
问题描述
问题
我正在尝试mat-table
在 Angular 7 中实现 a ,但它给了我以下错误:
错误错误:找不到类型为“对象”的不同支持对象“[对象对象]”。NgFor 仅支持绑定到 Iterables,例如 Arrays。
但是,该表确实正确选择了表的列,只是不显示任何数据。我尝试将其更改dataSource
为我的项目的直接数组而不是使用MatTableDataSource
,但后来我丢失了标题并且数据仍然没有显示。
如果有人能指出我做错了什么,我将不胜感激。
更新:
代码
填充我的项目数组的代码如下:
async ngOnInit() {
// Load the items from the blockchain
const items = await this.api.getApiRecords();
this.items = new MatTableDataSource<ApiRecord>(items);
}
表本身定义如下:
<mat-table [dataSource]="items" matSort>
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="provider">
<mat-header-cell *matHeaderCellDef mat-sort-header> Provider </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.provider}} </mat-cell>
</ng-container>
<ng-container matColumnDef="url">
<mat-header-cell *matHeaderCellDef mat-sort-header> URL </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.url}} </mat-cell>
</ng-container>
<ng-container matColumnDef="country">
<mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.country}} </mat-cell>
</ng-container>
<ng-container matColumnDef="updated_on">
<mat-header-cell *matHeaderCellDef mat-sort-header> Updated </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.updated_on}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
我从我的 API 获得以下数据:
{
"rows": [
{
"id": 0,
"type": "xxx",
"provider": "xxx",
"srvname": "xxx",
"url": "xxx",
"continent": "xxx",
"country": "xxx",
"flags": 0,
"revision": 2,
"updated_on": "2019-03-15T14:03:25",
"audited_by": "",
"audited_on": "1970-01-01T00:00:00",
"audit_ipfs_file": ""
}
],
"more": false
}
然后我将其序列化为一个定义如下的对象:
export class ApiResponse {
rows: ApiRecord[];
more: boolean;
}
其中ApiRecord
如下:
export class ApiRecord {
id: number;
type: string;
provider: string;
srvname: string;
url: string;
continent: string;
country: string;
flags: number;
revision: number;
updated_on: Date;
audited_by: string;
audited_on: Date;
audit_ipfs_file: string;
}
解决方案
我注意到,你不需要MatTableDataSource<>
为你的 API 响应包装,
async ngOnInit() {
// Load the items from the blockchain
this.items = await this.api.getApiRecords(); //this will be work
//this.items = new MatTableDataSource<ApiRecord>(items); << remove this
}
在这个 stackblitz示例中,dataSource 变量包含原始数据。不需要类型MatTableDataSource<>
更新:
这是正在工作的stackblitz 示例。
下面的代码也更新了,
<mat-header-row *matHeaderRowDef="['type', 'provider', 'url', 'country', 'updated_on']"></mat-header-row>
<mat-row *matRowDef="let row; columns: ['type', 'provider', 'url', 'country', 'updated_on']">
</mat-row>
推荐阅读
- android - 如果firebase没有身份验证,如何限制API密钥?
- python - 如何使用 Pyside 实现交互式 QAction?(即如何在 QAction 中捕获事件?)
- python - 我想使用 for 循环以有组织的名称格式绘制多个文件的数据
- php - 什么会导致 PHP 表单 AddRecipient 出现错误 500?
- git - 无法使用 git clean -xdff 删除“.git”
- python - 使用 Selenium (Python) 自动登录
- html - 如何使用自定义安装的字体?
- vue.js - 通过单击文本更改状态?
- php - CKEditorType 在 symfony sonata admin 中显示文本区域
- android - 在 arm64 中设置硬件断点