javascript - Cách lặp qua các thuộc tính của đối tượng với ngFor trong Angular

Bài đăng này về một vấn đề thú vị mà tôi tìm thấy ở chỗ làm.

Nếu bạn chưa biết. Tôi đang nói về Angular 2+

Vấn đề

Vậy bạn muốn hiển thị đánh dấu cho một danh sách, các giá trị cho danh sách này đến từ phần backend và vì lý do nào đó thay vì một mảng đối tượng thông thường, bạn nhận được thứ gì đó như thế này.

    { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}

Sau đó bạn thử sử dụng *ngFor nhưng một thông báo lỗi bất ngờ xuất hiện:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Bạn có thể sửa nó ở phía backend để bạn nhận được một mảng các đối tượng, nhưng không ai có thời gian cho điều đó. Đừng lo lắng, tôi đã lo cho chúng ta rồi.

Câu trả lời #1

Trong Angular 6.1, KeyValuePipe được giới thiệu, cho phép bạn lặp qua các thuộc tính của đối tượng:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

Tài liệu: https://angular.io/api/common/KeyValuePipe

Câu trả lời #2

Tôi không biết điều này có an toàn không, nhưng với những trường hợp đơn giản này tôi không thích giải pháp ống dẫn, vì vậy tôi thường sử dụng:

<div *ngFor="let k of objectKeys(yourObject)">
    {{yourObject[k].color}}
</div>

và trong bộ điều khiển:

objectKeys(obj) {
    return Object.keys(obj);
}

Đây là một trường hợp khá thường gặp, tôi không hiểu tại sao lại không có một cách triển khai chuẩn cho việc này như trong Angular.js 1.x

Câu trả lời #3

Một giải pháp tốt hơn là sử dụng một ống như cái này:

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Convert Object to array of keys.
 */
@Pipe({
  name: 'appProperties'
})
export class PropertiesPipe implements PipeTransform {

  transform(value: {}): string[] {

    if (!value) {
      return [];
    }

    return Object.keys(value);
  }
}

Sau đó trong mẫu của bạn:

<div *ngFor="let property of response | appProperties">
    <div *ngFor="let item of response[property]">
         {{item.something}}
    </div>
</div>

Câu trả lời #4

    <div *ngFor="let item of donation_list | keyvalue">
        <div class="donation-box">
             <Label class="donation-label">Date : {{item.value.PaymentDate}}</Label>
             <Label class="donation-label">Time : {{item.value.PaymentTime}}</Label>

        </div>
   </div>

Nếu bạn có nhiều thuộc tính hơn bên trong đối tượng, bạn có thể sử dụng như thế này.