Làm thế nào để hiển thị đối tượng json sử dụng * ngFor

Question

Tôi muốn hiển thị dữ liệu dưới đây từ căn cứ hỏa lực

{ 
    "-KBN9O_qqz-nZ9tPWFdM":{ 
     "createdAt":1456399292790, 
     "isActive":true, 
     "name":"Hero 1" 
    }, 
    "-KBN9gjJw1ZlMgt9pVsl":{ 
     "createdAt":1456399371220, 
     "isActive":true, 
     "name":"Hero 2" 
    }, 
    "-KBN9hYI4vYAsyh5k1lX":{ 
     "createdAt":1456399374548, 
     "isActive":true, 
     "name":"Hero 3" 
    } 
} 

khi làm angular.io Tour of Heroes hướng dẫn ví dụ

<li *ngFor="#hero of heroes"> 
    <span class="badge">{{hero.id}}</span> {{hero.name}} 
</li> 

Vì vậy, anh hùng id sẽ hiển thị ví dụ -KBN9hYI4vYAsyh5k1lX và tên anh hùng sẽ hiển thị ví dụ hero 3

---

Tôi đã thực hiện một số nghiên cứu và đi qua giải pháp ngăn xếp luồng này bởi @Thierry Templier access key and value of object using *ngFor

(1) Đây có phải là giải pháp phù hợp cho vấn đề của tôi không?

(2) Có giải pháp đơn giản hơn cho vấn đề này vì tôi cảm thấy rằng nó sẽ thực sự phổ biến đối với các nhà phát triển sử dụng Angular2 để hiển thị dữ liệu json đó.

Answer 1

Bạn cần triển khai đường ống tùy chỉnh để thực hiện việc này. ngFor chỉ hỗ trợ mảng và không phải đối tượng.

ống này sẽ trông như thế:

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

và sử dụng nó như thế:

<span *ngFor="#entry of content | keys">   
    Key: {{entry.key}}, value: {{entry.value}} 
</span> 

Xem câu hỏi này để biết thêm chi tiết:

• access key and value of object using *ngFor

Answer 2

Bạn có thể đặt các phím trong một mảng và ng lặp lại các phím.

export class IterateOverObject { 
    public arrayOfKeys; 

    @Input heros; 
    constructor() { 
     this.arrayOfKeys = Object.keys(this.heros); 
    } 
} 

<li *ngFor="#key of arrayOfKeys"> 
    <span class="badge">{{key}}</span> {{heros[key].name}} 
</li> 

này có vẻ đơn giản với tôi .. Thông tin thêm là here

Answer 3

căn cứ hỏa lực id được gọi $ .key. Ngoài ra, # hiện đã được đổi thành cho phép. Điều này sẽ làm việc cho bạn:

<li *ngFor="let hero of heroes"> 
    <span class="badge">{{hero.$key}}</span> {{hero.name}} 
</li>