首页 文章

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

提问于
浏览
0

我使用 *ngFor 遍历一个对象数组并应用几个过滤结果列表的管道 . 其中一个管道使用来自搜索字段的用户输入 . 当用户单击其中一个ngFor元素时,该对象将被发送到一个函数并添加到"selection"数组中,以便稍后使用 .

<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) 相同的操作 .

enter image description here

使用ngClass检查输入是否为空并且i === 0时,突出显示很容易 .

我坚持的是输入键按下事件 .

  • 我如何在ngFor循环内部的输入字段中监听事件,并且仅针对第一个结果(i === 0)?

  • 在将管道应用到items数组后,有没有办法记录对象列表(或至少是第一个)?

  • 你会怎么建议这样做?

1 回答

  • 0

    试试这个:

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

相关问题