angular6 - 提供的数据源与 getTableUnknownDataSourceError 中的数组、Observable 或 DataSource 不匹配
问题描述
我是 Angular 和 Angular Material 的新手,
没有 Angular Materail 它工作正常
<table>
<tr>
<th>City</th>
<th>State</th>
</tr>
<tr>
<td>{{ varEmp?.address.city}}</td>
<td>{{ varEmp?.address.state}}</td>
</tr>
</table>
使用 Angular Material 它不起作用
<table mat-table [dataSource]="varEmp" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="city">
<th mat-header-cell *matHeaderCellDef> City</th>
<td mat-cell *matCellDef="let element"> {{element?.address.city}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> State</th>
<td mat-cell *matCellDef="let element"> {{element?.address.state}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
在组件中我声明了变量
displayedColumns: string[] = ['city','state'];
简要描述组件代码以降低复杂性
json对象
{"address":
{"city": "Karwar", "state": "Karnataka"}
}
解决方案
我偶然发现了这个问题,因为我有一个 json 格式的静态数据源,我需要将它转储到一个 mat-table 中。
这种行为的最常见原因是 json 数据格式不正确。mat-table 期望的 json 数据应该是[{...}, {...}, {...}]
. 如果您无法更改 json 数据的格式,只需像这样将数据转换为 Array
var dataArr = new Array(jsonData));
它会起作用的。
注意 - 将其转换为数组会为数据添加额外的方括号层。您可能需要将[dataSource]
mat-table 中的属性更改为dataArr[0]
.
<table mat-table [dataSource]="dataArr[0]">
推荐阅读
- awk - 在 AWK 中循环关联数组时打印空行
- node.js - 类型错误:conn.db 不是函数
- javascript - JavaScript `reduce` 在尝试对简单浮点数求和时产生 NaN
- python-3.x - ParameterGrid 是否产生重复项?
- python-3.x - 使用 pandas pivot 时有没有办法避免重复问题?
- angular - nginx中的角度路由问题
- assembly - 文件中的字符无效
- javascript - Puppeteer爬虫数据导出
- .net-core - 使用 StackExchange.Redis 到 ElastiCache Redis 的 Lambda:RedisConnectionException - 没有连接处于活动状态/可用于服务此操作
- python-3.x - WinError 32 进程无法访问该文件,因为它正被另一个进程使用 | Python