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鍵時突出顯示的元素。