簡體   English   中英

在 Angular 4 中處理對象的最佳方法是什么

[英]What is the best way to handle an object of objects in Angular 4

任何人都可以引導我以正確的方式處理這樣的數據結構:

 {  
      "1":{  
         "id":"1",
         "name":"Facebook",
         "created_at":"",
         "updated_at":"",
         "fields":{  
            "1":{  
               "id":"1",
               "name":"G\u00f6rsel",
               "service_id":"1",
               "ord":"1",
               "token":"fimage",
               "type":"1",
               "created_at":null,
               "updated_at":null
            },
            "2":{  
               "id":"2",
               "name":"Post Metini",
               "service_id":"1",
               "ord":"2",
               "token":"ftext",
               "type":"2",
               "created_at":null,
               "updated_at":null
            },
            "3":{  
               "id":"3",
               "name":"Ba\u015fl\u0131k",
               "service_id":"1",
               "ord":"3",
               "token":"fheader",
               "type":"2",
               "created_at":null,
               "updated_at":null
            },
            "4":{  
               "id":"4",
               "name":"Link A\u00e7\u0131klamas\u0131",
               "service_id":"1",
               "ord":"4",
               "token":"flink_description",
               "type":"2",
               "created_at":null,
               "updated_at":null
            }
         }
      },
      "2":{  },
      "3":{  }
}

我注意到所有 Angular 酷函數,如排序、過濾循環數據都基於 javascript 數組,那么在 Angular 4 中處理類似結構的最佳方法是什么,例如用於 *ngFor,或使用過濾器等等......例如,如果我嘗試使用 NgFor 迭代這個對象,我會得到

錯誤:找不到類型為“object”的不同支持對象“[object Object]”。 NgFor 僅支持綁定到可迭代對象,例如數組。

在這一點上我不知道什么動作最好,我可以將對象轉換為數組,但這是我最好的方法嗎?

我認為結構可以改進。 在“字段”下使用對象數組是更好的選擇。 然后你就可以遍歷該數組。

對於任何可能遇到類似問題的人,基於@ ThomasSablik 的評論,並在聽取了他關於使用 Pipes 處理它的建議后,我可以找到我正在尋找的合適方法,我目前正在使用以下管道,它的工作原理如下魅力

export class KeyValuesPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

感謝 Thomas 為我指明了正確的方向。

暫無
暫無

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

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