應用* ngFor在具有兩個陣列與對象的對象，Angular2

-1

這是abc.component.ts （用戶[]是越來越由對象的HTTP請求後填充的）應用* ngFor在具有兩個陣列與對象的對象，Angular2

data = { 
    users: [], 
    photos: [] 
};

模板文件中的數據對象是abc.component.html

<div *ngFor="#d of data" class="media"> 
<div class="media-left media-middle"> 
    <a href="#"> 
     <img class="media-object" height="64px" width="64px" src="#" alt="img"> 
    </a> 
</div> 
<div class="media-body"> 
    <h4 class="media-heading">{{ d.users.name }}</h4> 
    ... 
</div>

在的console.log該數據對象的快照是

當我嘗試以顯示用戶的name屬性，我得到的錯誤：

Cannot find a differ supporting object '[object Object]'

我怎樣才能糾正for循環？

來源

2016-10-01 tjsxs

分享您的組件代碼引發錯誤：

例如，它應該工作正常。 – ranakrunal9

分量代碼 '出口類HttpTestComponent實現的OnInit { 數據= { 用戶：[]，照片：[] }; users = []; 構造（私人_httpTestService：HttpTestService）{} ngOnInit（）{ this._httpTestService.getPosts（） .subscribe（RES => {this.data.users = RES}）; console.log（this.data）; } }' – tjsxs

當您試圖用{{ d.users.name }}顯示用戶名時，您正在嘗試訪問數組用戶的名稱屬性，而這些用戶名顯然沒有。您必須執行{{ d.users[0]].name }}或循環遍歷用戶數組而不是data對象。

來源

2016-10-01 10:14:04

你只有一個對象 - 一個變量 - data。不可能像這樣通過* ngFor進行迭代。您可以分別對users[]或photos[]陣列進行循環。這裏

<div *ngFor="let user of data.users" class="media"> 
<div class="media-left media-middle"> 
    <a href="#"> 
     <img class="media-object" height="64px" width="64px" src="#" alt="img"> 
    </a> 
</div> 
<div class="media-body"> 
    <h4 class="media-heading">{{ user.name }}</h4> 
    ... 
</div>

來源

2016-10-01 11:20:52

應用* ngFor在具有兩個陣列與對象的對象，Angular2

回答

相關問題