如何获得 css class 的 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?

的条件，我还有其他方法吗？

Answer 1

您可以使用 ngClass 指令。

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

Answer 2

是的。使用 NgClass 指令，您可以根据打字稿 class.

中的条件动态应用 classes

例如：打字稿：

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>

NgClass 将在元素上应用对象的键作为 css class，如果值计算为真。如果值的计算结果为 false，它不会添加 class。

如何获得 css class 的 if 条件？

How to have if condition for css class?

css

angular