鍍金池/ 問(wèn)答/HTML5/ angular4 NG-for 循環(huán)時(shí)能否給個(gè)別數(shù)據(jù)添加額外的屬性

angular4 NG-for 循環(huán)時(shí)能否給個(gè)別數(shù)據(jù)添加額外的屬性

clipboard.png
如圖第二個(gè)div與其他div的數(shù)據(jù)不一樣

回答
編輯回答
心上人

可以把額外的屬性先封裝在數(shù)組中，然后再循環(huán)。

2018年4月26日 14:22
編輯回答
護(hù)她命

當(dāng)然可以了啊
如果只有兩種情況，用*ngIf="isSomething; else other"
如果有多種情況，使用ngSwitch。

<ng-container *ngFor="let btn of buttons; let i=index">
    <ng-container [ngSwitch]="btn.text">
        <span *ngSwitchCase="'A'"
            class="a" [title]="btn.text" (click)="_buttonClicked(btn.id)">
        </span>
        <span *ngSwitchCase="'B'"
            class="b" [title]="btn.text" (click)="_buttonClicked(btn.id)">
        </span>
        <button *ngSwitchDefault type="button"
                class="{{_getStyle(btn.id)}} rep-button"
                (click)="_buttonClicked(btn.id)">
                {{btn.text}}
        </button>
    </ng-container>    
</ng-container>
2017年7月23日 17:04