如何为CSS类添加if条件？

Question

编辑组件时，列网格也会更改。

目前，我的 edit-component.html

有这个

      <div class="col-6" *ngIf="!edit">
        Column1
      </div>
      <div class="col-12 col-md-4 col-sm-2" *ngIf="edit">
        Column1
      </div>
      <div class="col-6" *ngIf="!edit">
        Column2
      </div>
      <div class="col-12 col-md-4 col-sm-2" *ngIf="edit">
        Column2
      </div>

我有这个用于 edit-component.ts

    edit: boolean = false;

此方法有效，并且 css 在编辑或只读时会发生变化。但是还有其他方法可以满足 col-12 col-md-5 和 col-6 的 if 条件吗？

Answer 1

您可以使用 ngClass 指令。

<div [ngClass]="{'col-6': !edit, 'col-sm-2 col-md-4 col-12': edit}">
    Column1
</div>

Answer 2

是的。 使用 NgClass 指令，您可以根据打字稿类中的条件动态应用类。

例如： 打字稿：

get columnClassDef() {
  return {
    'col-6': !this.edit,
    'col-12 col-md-4 col-sm-2': this.edit,
  };
}

HTML：

<div [ngClass]="columnClassDef">
  Column1
</div>
<div [ngClass]="columnClassDef">
  Column2
</div>

如果值计算为 true，NgClass 会将对象的键作为元素上的 css 类应用。 如果该值评估为 false，则不会添加该类。