Question

我有一个带有名称的数组和带有状态的相同数组（true，false）。我正在遍历所有名称并创建按钮，我希望按钮类在该元素的状态为真时为btn-success，如果为false则为btn-danger。我该怎么做？我试过[ngClass]，但它不起作用。

app.component.html：

<div
        *ngFor="let element of elements; let index = index"
        (click)="changeStatus(index)"
        [ngClass]="{'btn-success':statuses[index]===true}"
        [ngClass]="{'btn-danger':statuses[index]===false}">
        {{element}}
</div>

app.component.ts中的

数组

  elements = ['Sticky notes', 'Google Drive', 'Phone notes', 'Phone Chrome Tabs', 'Empty OneNote Temp'];
  statuses = [false, false, false, false, false];

Answer 1

您不能使用ngClass指令中的2个。

传递给ngClass的值只是一个对象，因此您需要用逗号分隔其中的值，如下所示：

[ngClass]="{'btn-success':statuses[index]===true, 
            'btn-danger':statuses[index]===false}"

Here is a StackBlitz demonstration

Answer 2

<button
        *ngFor="let element of elements; let index = index"
        [ngClass]="statuses[index]?'btn-success':'btn-danger'">
        {{element}}
</button>

根据布尔变量设置特定的类

2 个答案: