如何在Angular 9中根据布尔变量添加CSS类名到变量中？

Question

我想从一个变量中添加类名，但这取决于 Angular 9 中的另一个变量。

以下是我的 TypeScript 代码。

export class InputComponent implements OnInit {
  @Input() inputBlockClass = 'col-12 d-flex px-0';
  @Input() inputBlockExtraClass = 'col-md-9';
  @Input() showLabel = true;

  // ...
}

以下是我的HTML代码：

<div [class]="inputBlockClass" [class.inputBlockExtraClass]="showLabel">

我也尝试了这个，但它无法工作。

<div [class]="inputBlockClass" [ngClass]="{inputBlockExtraClass: showLabel}">

两种解决方案都会得到相同的结果：

<div _ngcontent-sxj-c111="" class="col-12 d-flex px-0 inputBlockExtraClass">

但是我想要这个：

<div _ngcontent-sxj-c111="" class="col-12 d-flex px-0 col-md-9">

我该如何根据布尔变量的值从变量中添加一个类名？

- netdjw

---

我会删除[class]，使用 [ngClass]="[inputBlockClass, showLabel ? inputBlockExtraClass : '']"。 - developer033

Answer 1

您可以像这样操作：

<div [class]="inputBlockClass" [ngClass]="showLabel ? inputBlockExtraClass : ''">

或者你可以摆脱 [class]：

<div [ngClass]="[inputBlockClass, showLabel ? inputBlockExtraClass : '']">

STACKBLITZ演示

- developer033

---

你消除类的解决方案很好。我学到了新东西。谢谢。 - M A Salman

Answer 2

你尝试过这样做吗？ https://stackblitz.com/edit/angular-ngclass-nbleik

 <div [class]="inputBlockClass" [ngClass]="showLabel?inputBlockExtraClass:''">>
      sometext
 </div>

- M A Salman

---

如果你觉得有用的话，请用赞成票来支持一下吧 ;) - M A Salman