Как отфильтровать данные в списке на основе пользовательского ввода в angular6?

Question

Это мой HTML

<input type="text" class="form-control pl-0" placeholder="Search" aria-label="Username" aria-describedby="basic-addon1">

<li>
                          <a href="#" ><i class="fal fa-suitcase"></i> UI Elements <i class="fal fa-angle-right float-right menu-arrow"></i></a>
                          <ul class="sub-menu">
                            <li><a href="#">Forms</a></li>
                            <li><a href="#">Charts</a></li>
                            <li><a href="#">Buttons</a></li>
                            <li><a href="#">Tabs</a></li>
                          </ul>
                        </li>

В приведенном выше HTML у меня есть список элементов, когда пользователь вводит данные в поле ввода более 2 символов, а затем фильтрует данные списка, используя angular6

Answer 1

Вам необходимо привязать тег li к массиву и затем отфильтровать его:

data = ['Forms', 'Charts', 'Buttons', 'Tabs'];
filteredData: any[];
ngOnInit(){
  this.filteredData = this.data;
}

В html-представлении:

<ul class="sub-menu" *ngFor="let item of filteredData">
    <li><a href="#">{{item}}</a></li>
</ul>

Сейчассобытие пожара каждый раз, когда пользователь вводит данные внутри ввода:

<input type="text" class="form-control pl-0" placeholder="Search" aria-label="Username" aria-describedby="basic-addon1" (change)="filter($event)">

Внутри вашего компонента:

filter($event){
  let reg = $event.target.value;
  this.filteredData = this.data.filter(x => return x.toLowerCase().indexOf(reg.toLowerCase()) != -1);
}

И список будет автоматически изменяться с новыми отфильтрованными данными.