我遇到的情况是我收到数据库中的数据对象,其中包含文件版本的记录。可能有5个版本(5个记录)或单个版本返回。
我的问题是我使用ngFor
循环数据数组并将它们打印到表中。如果只返回一条记录,则数据不再是对象数组,而只是一个对象。
<tbody class="ruleVersions">
<tr *ngFor="let m of mapData.ruleVersion.x">
<td class="small">V {{ m.RuleVersion }}.0</td>
<td [innerHtml]="m.CreatorNTID | ntidLink"></td>
<td class="small">{{ m.VersionNotes ? m.VersionNotes : 'N/A' }}</td>
<td class="small">{{ m.BasedOnRuleVersionID ? m.BasedOnRuleVersionID : 'N/A' }}</td>
<td class="small">{{ m.MetaInsertUtc }}</td>
</tr>
</tbody>
多条记录:
单一记录:
这会产生问题,因为ngFor
设置为循环遍历数组。由于单个记录不是多个对象的数组,因此会抛出此错误:
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
解决此问题的最佳方法是什么?是否有任何角度我可以用来将数据视为数组,即使它不是,也许是某种管道?
我能想到的唯一另一种方法是将整个对象传递给一个函数,并将对象推送到数组(如果是单个记录)。这就产生了不希望每个记录都成为数组的问题。
只是好奇是否有任何内置的角度方法来解决这个问题?
更新
我通过创建管道来解决这个问题。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'isArray' })
export class IsArrayPipe implements PipeTransform {
transform(x): any {
return Array.isArray(x) ? x : [x];
}
}
<tr *ngFor="let m of mapData.ruleVersion.x | isArray: x">
答案 0 :(得分:3)
当您收到回复时,您可以检查它是否是数组。如果它不是一个对象,你可以在一个数组中设置对象,所以在服务中这样的东西:
getData() {
return this.http.get('url')
.map(response => {
let res = response.json();
if(!Array.isArray(res)) {
return [res]
}
return res;
})
}
所以现在,无论你得到一个数组还是一个对象,它总是可以用*ngFor
进行迭代,因为组件总是接收一个数组。