如何动态添加class？

Question

我在 Angular 中编程的时间很短，但我被按钮设计卡住了。我已经用 ngIf 实现了它们，根据它们是否可用动态地出现和消失。问题是我觉得它有点复杂，我想利用相同的逻辑让它们始终显示在屏幕上，但根据我之前使用的相同条件添加颜色。我试图实现 ngClass 的使用，但很明显有些地方不对劲，因为它不起作用。这是我的 html:

<div *ngIf="mainFlowchartInstance.eisChartData.value" class="temp_zoom-actions">
      <div [ngClass]="{'orangeText' : zoomButtons == 'zoomButtons.reset'}" class="center" (click)="zoomReset()"><i class="icon-refresh"></i></div>
      <div [ngClass]="{'orangeText' : zoomButtons == 'zoomButtons.out'}" class="zoom-out" (click)="zoomOut()"><i class="icon-search-minus"></i></div>
      <div [ngClass]="{'orangeText' : zoomButtons == 'zoomButtons.in'}" class="zoom-in" (click)="zoomIn()"><i class="icon-search-plus"></i></div>
</div>

这是我的 ts:

  public zoomButtons = {
    in: false,
    out: true,
    reset: false
  };


  setZoomButtonsState() {
    this.zoomButtons.out = !!this.currentZoomPosition;
    this.zoomButtons.in = this.zoomButtons.reset = !(this.currentZoomPosition === this.rangeZooms.length - 1);
  }

有人让我看到我的错误吗？提前谢谢你。

Answer 1

尝试这样使用（检查zoomButtons.reset或zoomButtons.out或zoomButtons.in是否为true或false，然后应用class orangeText):

<div [ngClass]="{'orangeText' : zoomButtons.reset}" 
  class="center" (click)="zoomReset()">
  <i class="icon-refresh"></i>
</div>
<div [ngClass]="{'orangeText' : zoomButtons.out}" 
  class="zoom-out" (click)="zoomOut()">
  <i class="icon-search-minus"></i>
</div>
<div [ngClass]="{'orangeText' : zoomButtons.in}" 
  class="zoom-in" (click)="zoomIn()">
  <i class="icon-search-plus"></i>
</div>

Class orangeText 如果在 : 之后得到 true 将适用，就像这个来自 angular doc 的例子：

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

在这个地方：

[ngClass]="{'orangeText' : zoomButtons.reset}"

zoomButtons.reset 不带单引号的会被当作变量，return true 或者 false.

也会被当作变量

如何动态添加class？

how to add a class dynamically?

dynamic

ng-class

angular

angular7