时间戳

首页 > 解决方案 > ngClass 混合条件

javascript - ngClass 混合条件

问题描述

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

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

[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>

标签： javascriptangulartypescript

解决方案

您不能同时使用数组和对象ngClass（请参阅此处）。相反，您可以只使用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>

推荐阅读