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中的元素与否。

Answer 2

您可以在此处使用ngClass指令

[ngClass]="showLiftsClass"

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

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

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

Answer 3

试试这个：

<div *ngFor="let record of lift; ; let i=index" class="list-lifts" 
[ngClass]="{'showLifts': isBtnActive}">

或者您可以使用：* ngIf

*ngIf="expression" (e.g. *ngIf="i!=0" or *ngIf="i==0")

Angular2 +中的动态CSS类

4 个答案: