angular - 如何根据条件在 ng2-completer 中应用 css？

Question

我在我的 Angular 2 应用程序中使用 ng2-completer。无论如何，我是否可以根据某些条件在完成下拉列表中设置或应用 css 内容。我有红色、蓝色、绿色......等内容。我希望项目 RED 具有红色背景色，下拉菜单中的其他项目也是如此。谢谢。

Answer 1

您可以class有条件地添加如下：

[class.classname]="condition == true"

或使用ngClass如下：

[ngClass]="{'classname': condition == true}"

您可以编写不同的类并有条件地添加它们。

Answer 2

您可以先将条件添加到 ng2-completer，例如：

<ng2-completer [ngClass]="{'red': isRedColor()}" ...></ng2-completer>

然后通过添加深度选择器来强制应用 css

host: >>> ng2-completer.red .completer-row { background:red; }

其他颜色依此类推。