如何在 ionic 3 ngFor 生成的按钮上添加一个类？答案

【问题标题】：How to ADD a class on ionic 3 ngFor generated buttons?如何在 ionic 3 ngFor 生成的按钮上添加一个类？
【发布时间】：2017-11-25 20:07:06
【问题描述】：

我有这个简单的*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>

我尝试在我尝试过的类中呈现{{markerColor.className}}：

class="markerColor.className"得到

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

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

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

谢谢

【问题讨论】：

如果有帮助，请考虑对答案进行投票。不是因为要点（我不能和他们一起买食物），而是为了让其他 SO 用户知道答案确实有效，并且帮助您解决了您试图解决的问题 :)
@sebaferreras 与将它们标记为“答案”不同吗？我的意思是，如果它不起作用，那就不是答案：P
嗯，不完全是...我的意思是，当我在 SO 上查找某些内容时，我看到一个标记为已接受但没有赞成票的答案，我知道答案可能是一种解决方法，但它不是最好的解决问题的方法......你可以看看this discussion。
@sebaferreras 从现在开始我将永远支持。

标签： angular ionic2 angular2-template ionic3

【解决方案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>

【讨论】：

你是绝对正确的@developer033，我专注于 ngClass 并没有看到。感谢您指出这一点:)
@developer033 但是为什么它甚至可以使用index？
嗯，这实际上是一个非常好的问题。我无法在文档中找到与 $index 相关的任何内容...
@sebaferreras 我也没有。 It's the same thing with that we can use this.<property> in template。它没有记录。