Angular 2 ng2-auto-complete 组件的自定义 UI 样式答案

【问题标题】：Custom UI styling for Angular 2 ng2-auto-complete componentAngular 2 ng2-auto-complete 组件的自定义 UI 样式
【发布时间】：2017-03-06 17:35:41
【问题描述】：

为了创建一个 TypeAhead 组件，我使用了 Angular2 ng2-auto-complete 组件。我能够获得正确的功能。现在我想设计它。意思是我想在箭头上添加动画，以便在显示下拉菜单时，箭头反转。

我应该使用 ng2-auto-complete 组件中的list-formatter 选项吗？如果是，我该如何使用它？我尝试使用我使用动画的 css 类，但它不起作用。

另外，如果我只是添加图标，z-index 不会让我将图标放在前面。表示该图标存在但隐藏在 typeahead 组件后面。

这是我的 HTML 代码

<input ng2-auto-complete id="inputEvent" class="form-control" [(ngModel)]="model" ngModel
     name="event" #event="ngModel" [source]="items" value-property-name=null display-property-name="name" (valueChanged)="onSelect($event)"/>
<span class="icon-arrow-down"></span>

【问题讨论】：

标签： css angular

【解决方案1】：

在我发布的问题中，我试图添加一个外部图标以显示在 typeahead 组件上，以模仿 <button class="btn dropdown-button"></button> 的外观。

所以我首先使用了<i></i>，然后给它添加了一个覆盖类。

我的 HTML 是，

<i class="fa fa-lg icon-arrow overlay"></i>
<input ng2-auto-complete class="form-control" [(ngModel)]="model" ngModel
     name="typeahead" #typeahead="ngModel" [source]="values" value-property-name=null display-property-name="name" (valueChanged)="onSelect($event)"/>

CSS，

.overlay{
   position: absolute;
   top: 15px;
   left: 195px;
   width: 100%;
   height: 100%;
   z-index: 10;
   font-size:11px
}

【讨论】：