当我搜索文本但在AngularJs中显示带有图标的选项时，是否有一种角度选择的方法？

Question

例如，我有以下元素列表：

[{
  id: 1,
  name: 'The only planet with life that currently found',
  icon: 'base64-blablalbla',
  abbr: 'Earth'
}, {
  id: 2,
  name: 'Another string that describes M*a*r*s',
  icon: 'base64-blablalbla',
  abbr: 'Mars'
}, {
  id: 3,
  name: 'Another string that describes M*o*o*n',
  icon: 'base64-blablalbla',
  abbr: 'Moon'
}]

我想使用选择的插件，当我在“abbr”字段上搜索“ar”（点击地球和火星）时，将显示显示其图标的选项。与一般行为不同，搜索“名称”字段，显示“名称”字段，我的要求是搜索“abbr”字段，但显示“图标”字段，或显示名称+图标或我可以自定义它是最好的。

select2或任何其他插件也欢迎。

任何人都可以帮助我吗？提前谢谢。

Answer 1

您可以通过CustomPipe实现此功能：

<div *ngFor="let item of items | yourCustomPipe:'id,text':query">
    <i [ngClass]="item.icon"></i>
</div>

但要好心，Pipe can slow your app

所以，你有一个custom Pipe which will filter your items。