如何从 Angular 9 中的变量添加 CSS class 名称取决于布尔变量？

Question

我想从变量中添加 class 名称，但这取决于 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">

如何根据布尔变量从变量中添加 class 名称？

Answer 1

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

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

Answer 2

你可以这样做：

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

或者你可以去掉 [class]:

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

STACKBLITZ DEMO

如何从 Angular 9 中的变量添加 CSS class 名称取决于布尔变量？

How to add CSS class name from variable in Angular 9 depends on boolean variable?

angular-ng-class

angular