如何在 ionic 3 ngFor 生成的按钮上添加 class？

Question

我有这个简单的 *ngFor

<button ion-button *ngFor="let markerColor of markerColors, let i = $index" (click)="markText()" [disabled]="status.pdf.pagesLoaded == 0"  class="$markerColor.className">
     <ion-icon name="md-brush">{{markerColor.className}}</ion-icon>
</button>

它正确呈现为

<button class="someClass disable-hover button button-ios button-default button-default-ios" ion-button=""><span class="button-inner">
    <ion-icon name="md-brush" role="img" class="icon icon-ios ion-md-brush" aria-label="brush" ng-reflect-name="md-brush">marker-color-1</ion-icon>
    </span><div class="button-effect"></div>
</button>

我尝试在 class 中渲染 {{markerColor.className}} 我试过：

class="markerColor.className" 得到

class="markerColor.className disable-hover button button-ios button-default button-default-ios"

如果使用 [class]="markerColor.className" 或 class="{{markerColor.className}}" 属性，它会呈现名称，但其他 classes 会丢失。 class="marker-color-1

如何正确地向这个 ngFor 添加 class？

谢谢

Answer 1

您应该使用 ngClass，因为它不会覆盖通过任何其他方法添加的其他类：

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

所以在你的情况下，它会是这样的：

<button ion-button *ngFor="let markerColor of markerColors, let i = index" (click)="markText()" [disabled]="status.pdf.pagesLoaded == 0"  [ngClass]="markerColor.className">
     <ion-icon name="md-brush">{{markerColor.className}}</ion-icon>
</button>

如何在 ionic 3 ngFor 生成的按钮上添加 class？

How to ADD a class on ionic 3 ngFor generated buttons?

ionic2

angular2-template

ionic3

angular