Question

我实际上正在尝试这段代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<button [ngClass]="{'btn': showDirectiveContent === false ? 'btn btn-danger': 'btn btn-success'}">
    <b *ngIf="!showDirectiveContent; else noServer">Display Details</b>
      <ng-template #noServer>
        <b>Hide Details!</b>
      </ng-template>
</button>

* ngIf效果很好，我也尝试过[ngStyle] [ngStyle] =“ {backgroundColor：i> 4？'green'：'' 指令也很好用，可惜我在ngClass指令上失败了，试图用谷歌搜索它唯一的普通指令，没有指令：（

Answer 1

将代码更改为此：

<!-- class="btn" is common to both cases -->
<button class="btn" [ngClass]="{'btn-danger': !showDirectiveContent, 'btn-success': showDirectiveContent}">
<!-- content -->
</button>

说明：

根据https://angular.io/api/common/NgClass，在将对象用作值时，ngClass属性期望采用以下格式：

对象-键是在给定表达式时添加的CSS类值中的值为真值，否则将其删除。

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

ngClass指令有条件else或？ 'class1'：'class2'

1 个答案: