簡體   English   中英

Angular2-ng對於單個對象與數組

[英]Angular2 - ngFor single object vs array

我遇到從數據庫接收數據對象的情況,該對象包含文件版本的記錄。 可能有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">

得到響應后,可以檢查它是否為數組。 如果不是對象,則可以將對象設置為數組,因此在服務中應執行以下操作:

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

所以現在,無論您獲得數組還是對象,它都可以通過*ngFor迭代,因為組件始終會接收到數組。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM