Angular 5-带管道和单击事件的ngFor

Question

我使用*ngFor对象数组，并应用几个管道来过滤结果列表。 管道之一使用来自搜索字段的用户输入。 当用户单击ngFor元素之一时，该对象将发送到函数并添加到“选择”数组中，以供以后使用。

<input type="search" [(ngModel)]="searchInput"> 
<a *ngFor="let item of items | firstFilter | inputFilter:searchInput; let i = index">
 <span (click)="send(item)"> send {{item.name}} </span>
</a>

我正在尝试复制突出显示第一个结果的搜索字段（例如google）的行为，如果用户在键入时按Enter，它将触发与单击结果send(item)相同的操作。

使用ngClass检查输入是否为空并且i === 0十分容易。

我遇到的是Enter键按下事件。

• 我将如何在ngFor循环内部的输入字段中仅针对第一个结果（i === 0）监听事件？
• 在将管道应用到items数组之后，有没有办法记录对象列表（或至少第一个对象）？
• 您会如何建议呢？

Answer 1

尝试这个：

<input 
    type="search" 
    [(ngModel)]="searchInput"
    (keyup.enter)="selectFirstElement()"> 
<a *ngFor="let item of items | firstFilter | inputFilter:searchInput; let i = index">
 <span 
    (click)="send(item)"> send {{item.name}} </span>
</a>

添加方法selectFirstElement，该方法将访问第一个元素或当用户按Enter键时突出显示的元素。