angular2/JavaScript的 - NgFor通過陣列循環對象

的內部我有自己的對象的數據，我通過使用ngFor迴路。但是，現在的目標，我想遍歷以及在<li></li>angular2/JavaScript的 - NgFor通過陣列循環對象

目前，它看起來像這樣的數組部分。不過，我不希望在一個<li></li>完整的字符串我只想一件數組那裏。

相關代碼：

tier.model

export class Tier { 
    constructor (
    public id: number, 
    public title: string, 
    public rewards: any[], 
    public price: number 
) 
    {} 
}

組件：

export class PackagesComponent { //will be renamed to TierComponent 
    public tierToEdit: Tier; 
    editMode = false; 
    tiers: Tier[] = [ 
    new Tier(
     10, 
     'First Tier', 
     ['Server access - Simple', 'Win something small', 'and so on'], 
     5.00), 
    new Tier(
     11, 
     'Second Tier', 
     ['Server access - Standard', 'Win something medium', 'and so on and on'], 
     10.00), 
    new Tier(
     12, 
     'Third Tier', 
     ['Server access - Advanced', 'Win something big', 'and so on and on and on'], 
     10.00) 
    ]

模板：

<div class="row"> 
    <div class="col-md-4" *ngFor="let tier of tiers; let i=index;"> 
    <ul class="pricing-table"> 
     <li class="plan-name"> 
     {{ tier.title }} 
     </li> 
     <li *ngFor="let reward of tiers"> 
     {{ reward.rewards }} 
     </li> 
     <p class="plan-price">{{ tier.price }}</p> 
     <li class="plan-action"> 
     <a class="btn btn-primary" (click)="onEdit(tier)">Edit</a> 
     <a class="btn btn-success" (click)="this.clickSave()">SaveYes</a> 
     <a class="btn btn-warning" >Get</a> 
     </li> 
    </ul>

最後，它應該是這樣的：

別的東西我想是這樣的：

<div class="col-md-4" *ngFor="let tier of tiers; let i=index;"> 
    <!-- Show Mode --> 
    <ul *ngIf="!editMode || tierToEdit != tier" class="pricing-table"> 
     <li class="plan-name"> 
     {{ tier.title }} 
     </li> 
     <li *ngFor="let reward of tiers; let i=index"> 
     {{ reward.rewards[i] }} 
     </li>

這不是給我的第一陣列的第一要素，所述第二陣列的所述第二元件和所述第三數組的第三個元件：

希望這不是混亂的，還是很新的角度/ JavaScript的，對不起，可能問愚蠢的問題或錯誤使用條款:)非常感謝你！

來源

2017-06-08 junior_dn

請創建plnkr或小提琴。 – lin

您需要在第二個*ngFor嵌套數組上迭代，以及像：

<div class="row"> 
    <div class="col-md-4" *ngFor="let tier of tiers; let i=index;"> 
    <ul class="pricing-table"> 
     <li class="plan-name"> 
     {{ tier.title }} 
     </li> 
     <li *ngFor="let reward of tier.rewards"> 
     {{reward}} 
     </li> 
     <p class="plan-price">{{ tier.price }}</p> 
     <li class="plan-action"> 
     <a class="btn btn-primary" (click)="onEdit(tier)">Edit</a> 
     <a class="btn btn-success" (click)="this.clickSave()">SaveYes</a> 
     <a class="btn btn-warning" >Get</a> 
     </li> 
    </ul> 
</div> 
</div>

來源

2017-06-08 12:32:27 anoop

哇，我感到難以置信的愚蠢。非常感謝，工作。不知道我能用戶tier.rewards，認爲這將需要tierS.rewards，因爲那是我在component.ts定義的方式非常感謝您！ –

所以基本上層現指上方的層？ http://puu.sh/wekZj/c85bc73f5a.png只是問我是這麼理解對未來 –

@junior_dn：是的'tier'指1'* ngFor'，不管有多少ngFor你裏面，因爲* ngFor創建'block scope'，就像'var in javascript' ...並樂意幫助你:) – anoop

試試這個

<li *ngFor="let reward of tier.rewards"> 
     {{ reward }} 
    </li>

來源

2017-06-08 12:09:04 aseferov

給了我這樣的：http://puu.sh/wej4P/d704d7ec26.png –

angular2/JavaScript的 - NgFor通過陣列循環對象

回答

相關問題