ngClass混合条件

Question

我要实现以下内容-我想要两个预设类，它们由我设置的一些组件变量完成，可以正常工作，但是我需要添加另一个conditional class。

这就是我所拥有的，第一部分正在工作，而对象部分却没有：

[ngClass]="['btn-' + buttonStyle, 'btn-' + buttonSize, {'btn-rounded': isRounded}]"

isRounded 是@Input()的组成部分。

@Input() isRounded: boolean = false;

最终目标是：

<a class="btn btn-success btn-md btn-rounded">okay</a>

Answer 1

您不能同时使用ngClass中的数组和对象（请参见here）。相反，您可以仅使用class和ngClass的组合，也可以使用三元条件。

使用class和ngClass。

<button [class]="'btn-' + buttonStyle + ' btn-' + buttonSize" [ngClass]="{'btn-rounded': isRounded}">Test</button>

在ngClass中使用三元条件。

<button [ngClass]="['btn-' + buttonStyle, 'btn-' + buttonSize, isRounded ? 'btn-rounded' : '']">Test</button>

Answer 2

您可以做类似的事情

 this.btnClassList = {
      [`btn-${this.buttonStyle}`]: true,
      [`btn-${this.buttonSize}`]: true,
      [`btn-rounded`]: this.isRounded,
}

和模板

<a [ngClass]="btnClassList">okay</a>

stack blitz example