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

【问题标题】：How to apply css in ng2-completer based on condition?如何根据条件在 ng2-completer 中应用 css？
【发布时间】：2019-03-07 14:10:29
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

或使用ngClass如下：

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

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

【讨论】：

感谢您的快速回复。但是要设置“条件”，我需要获取 ng2-completer 下拉内容的值，然后应用条件。假设我在下拉菜单中有 3 个项目；红色、绿色和蓝色。如何在下拉加载期间访问这些项目，然后使用 ngClass 应用该类？
在将其下拉之前，您拥有数据。您可以在从服务或其他东西获取数据后选择...您也可以得到(selected)="selected($event)"的帮助

【解决方案2】：

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

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

然后通过添加 deep selector 强制 css 应用

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

其他颜色以此类推。

【讨论】：