Угловой 5 - ngFor с трубой и событием щелчка - PullRequest
Новая
       33

Угловой 5 - ngFor с трубой и событием щелчка

0 голосов
/ 04 мая 2018

Я перебираю массив объектов с *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), где подсвечивается первый результат, и если пользователь нажимает клавишу ввода во время набора текста, это вызовет то же действие, что и нажатие на результат send(item). * 1006. *

enter image description here

Подсветка достаточно проста с помощью проверки ngClass, если вход не пустой и i === 0.

То, с чем я застрял - это событие нажатия клавиши ввода.

  • Как бы я прослушал событие в поле ввода, внутри цикла ngFor и только для первого результата (i === 0)?
  • Есть ли способ записи списка объектов (или хотя бы первого 1) после того, как трубы были применены к массиву предметов?
  • Как бы вы предложили пойти по этому поводу?

1 Ответ

0 голосов
/ 04 мая 2018

Попробуйте это: 

<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, который будет обращаться к первому элементу или к элементу, который подсвечивается при нажатии клавиши ввода.

...