Angular 5 - ng用于管道和点击事件

Question

我使用*ngFor遍历一个对象数组，并应用几个过滤结果列表的管道。 其中一个管道使用来自搜索字段的用户输入。 当用户单击其中一个ngFor元素时，该对​​象将被发送到一个函数并添加到＆＃34;选择＆＃34;数组，稍后再使用。

<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.

我遇到的是输入键按下事件。

• 我如何在ngFor循环内部的输入字段中监听事件，并且仅针对第一个结果（i === 0）？
• 有没有办法记录对象列表（或至少是第一个 一，）管道已经应用到物品阵列？
• 你会怎么建议这样做？

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键时突出显示的元素。