Как сделать фильтр на странице в angular

Question

У меня есть массив с объектами в моем компоненте:

finalistsCollection = [
    { name: 'Ann' , nomination: 'N1' },
    { name: 'Jack' , nomination: 'N1' },
    { name: 'Morgan', nomination: 'N2' },
    { name: 'Billy', nomination: 'N2' }, 
    { name: 'Monica', nomination: 'N3' },
    { name: 'Rian', nomination: 'N3' },
]

А вот html компонент:

<button>Show N1 nomination</button>
<button>Show N2 nomination</button>
<button>Show N3 nomination</button>
<button>Show All</button>

<div *ngFor="let finalist of finalistsCollection">
    <div class="member-block">
      {{finalist.name}}
    </div>
</div>

Как сделать кнопки с функцией фильтра в Angular путь?

Answer 1

<button (click)="filter('N1')">Show N1 nomination</button>
<button (click)="filter('N2')">Show N2 nomination</button>
<button (click)="filter('N3')">Show N3 nomination</button>
<button (click)="filter('')">Show All</button>

<div *ngFor="let finalist of finalistsCollections">
    <div class="member-block">
      {{finalist.name}}
    </div>
</div>

в тс:

    filter(search){
if(search!==''){
    this.finalistsCollections=this.finalistsCollection.filter(q=> q.nomination.indexOf(search) > -1);
}else{
this.finalistsCollections=this.finalistsCollection;
}
    }

и в наборе ngOnInit

this.finalistsCollections=this.finalistsCollection;

Answer 2

Для просмотра Angular вам нужно посмотреть базовый учебник по c. Сначала нужно добавить метод нажатия для кнопки и передать значение номинации, которое вы хотите отфильтровать:

<button (click)="filterData('N1')">Show N1 nomination</button>
<button (click)="filterData('N2')">Show N2 nomination</button>
<button (click)="filterData('N3')">Show N3 nomination</button>
<button (click)="filterData()">Show All</button>
<div *ngFor="let finalist of filteredCollection">
 <div class="member-block">
    {{finalist.name}}
 </div>
</div>

, а затем добавьте свой метод filterData в компонент filteredCollection = []; filterData(nomination: string = null) { if (nomination) { this.filteredCollection = this.finalistsCollection.filter( x => x.nomination == nomination ); } else { this.filteredCollection = this.finalistsCollection; } }

Вот рабочий пример: https://stackblitz.com/edit/angular-arrayfilter-example