【问题标题】:Angular2 - ngFor single object vs arrayAngular2 - ngFor 单个对象与数组
【发布时间】:2017-08-10 02:59:36
【问题描述】:

我有一种情况,我从我的数据库中收到一个数据对象,其中包含文件版本的记录。可能有 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];
    }
}

&lt;tr *ngFor="let m of mapData.ruleVersion.x | isArray: x"&gt;

【问题讨论】:

标签: arrays angular typescript


【解决方案1】:

收到回复后,您可以检查它是否为数组。如果它不是一个对象,你可以将对象设置在一个数组中,所以在服务中是这样的:

getData() {
  return this.http.get('url')
    .map(response => {
      let res = response.json();   
      if(!Array.isArray(res)) {
         return [res]    
      }  
      return res;
    })
}

所以现在,无论你得到一个数组还是一个对象,它总是可以用*ngFor 迭代,因为组件总是接收一个数组。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-09-13
    • 1970-01-01
    • 2017-07-24
    • 2017-03-11
    • 1970-01-01
    • 1970-01-01
    • 2018-09-21
    相关资源
    最近更新 更多