angular - Angular 2 中的动态 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() 函数在单击按钮时切换 CSS 类 .showLifts。这很好用。

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

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

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

Answer 1

正如其他人提到的，您可以使用 [ngClass]。此处发布了一个答案:

Dynamic classname inside ngClass in angular 2

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