Angular2 +中的动态CSS类

Question

HTML:

<div *ngFor="let record of lift" class="list-lifts" [class.showLifts]="isBtnActive">

零件:

isBtnActive: boolean = false;

toggleClass() {
    this.isBtnActive = !this.isBtnActive;
  }

CSS:

.list-lifts {

  &:not(:first-of-type) {
    margin-top: -11px !important;
    display: none;
  }
}

.showLifts {
  display: block !important;
}

// I need something like this to be built in the view:
.ValueshowLifts {}

该toggleClass()功能.showLifts在单击按钮时切换CSS类.这非常有效.

问题是,我需要类.showLifts具有动态名称,我不确定生成它的语法是什么.出于逻辑原因,这是一个例子:

[class.{{ record.name }}showLifts]="isBtnActive"

但当然这不是有效的语法.

Answer 1

您可以在此处利用 ngClass 指令

[ngClass]="showLiftsClass"

在您的代码中，您可以按如下方式向其动态添加 css 类，

showLiftsClass = {
      'record1showLifts' : true,
      'record2showLifts' : false,
      'record3showLifts' : false,
      'record4showLifts' : false
      ...
}

您可以将单个或多个类作为true。值true会将类添加到 DOM 元素。

Answer 2

正如其他人所提到的，您可以使用[ngClass]。答案发布在这里：

Angular 2中的ngClass内部的动态类名

但我想提一提，如果您使用CSS仅隐藏或显示元素，则可以使用*ngIf或[hidden]，这取决于您是否想要DOM中的元素。