Angular 5 - 带有管道和点击事件的 ngFor答案

【问题标题】：Angular 5 - ngFor with pipe and on click eventAngular 5 - 带有管道和点击事件的 ngFor
【发布时间】：2018-05-04 08:07:04
【问题描述】：

我使用*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)？
有没有办法记录对象列表（或至少是第一个一），在管道应用到项目数组之后？
您建议如何处理？

【问题讨论】：

代码旁注：Angular 团队特别建议不要使用管道过滤列表（请参阅here）
在解决您的实际问题方面，我会看一下预先构建的组件。 Angular 材质库提供了一个自动完成元素（参见 here），具有您正在寻找的那种功能
非常有用！我认为我需要将“过滤器”移动到组件中。
如果您想在向用户显示列表之前对其进行过滤，您可以在ts 中轻松完成此操作，以便自动完成元素仅包含您希望用户看到的项目。
我不想使用 Material 自动完成功能，因为它没有为我提供我想要的界面并决定创建自己的界面。我需要一个用户可以浏览和搜索的列表。

标签： javascript angular ngfor key-events pipes-filters

【解决方案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 将访问第一个元素或当用户按下回车键时突出显示的元素。

【讨论】：

你的建议正是我不知道该怎么做的。如何访问组件中的第一个元素？
您应该能够使用 item[0] 访问第一个组件。这只是一个数组。我更新了代码。
我已经尝试从循环中检测 keyup.enter ，它不会监听输入字段中的事件。此外，组件无法通过调用它的项目从*ngFor 循环内部访问内部逻辑。这就像试图从外部for(i=0,i<10,i++){...} 呼叫i。我可以调用 items[0] 但它会给我原始数组的索引，而不是我使用管道的过滤数组。我相信我需要将整个逻辑移动到 ts 文件中。
是的，我看到你的问题下的 cmets - 最好将过滤器逻辑移动到组件本身，然后你就可以访问列表的所有元素。然后使用第一个（keyup.enter）你可以调用一个可以访问过滤列表和第一个元素的方法。