如何根据条件在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>

然后通过添加deep selector

来强制CSS应用

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

其他颜色，依此类推。