Как установить локальную переменную в angular из HTML?

Question

У меня есть переменная в моем ts файле:

 currentItem:any;

У меня есть div, который генерируется на основе коллекции, также у него есть фильтр pipe для этого.

<div *ngFor="let item of collection | search: searchText;">
// some content
</div>

Я хочу установить значение currentItem в item[0] из HTML динамически.

Таким образом, каждый раз, когда фильтр применяется к коллекции, currentItem всегда будет иметь значение first item из collection.

Можем ли мы сделать это? Любая помощь приветствуется. Спасибо!

Answer 1

Вы также можете использовать ту же поисковую трубу в своем компоненте. Сначала добавьте поисковую трубу в ваш массив поставщиков модулей, например

providers :[SearchPipe]

Вставьте поисковую трубу в ваш компонент следующим образом:

constructor(private searchPipe: SearchPipe) {}

Надеюсь, ваш searchText установлен из поля ввода. Для события change вы можете установить свойство currentItem следующим образом

onSearchTextChange(event){
   this.searchText = event.target.value
   const currentItem = this.searchPipe.transform(collection , this.searchText )
   this.currentItem = currentItem.length > 0 ? currentItem[0] : [];
}