при нажатии переключателя должен отображаться правильный элемент и скрываться все остальное.

Question

У меня есть страница, которая состоит из нескольких категорий товаров с ценой, названием, рейтингом.Также в моей боковой панели у меня есть опция фильтрации.Это опции с помощью переключателя.При нажатии на любую из радиокнопок она должна отображать тот же товар и скрывать все остальные товары.Как можно добиться этой фильтрации?

Answer 1

Попробуйте, это скроет переключатели, которые не выбраны.

 <div *ngIf="radio == undefined || radio !== (i+1)">
   <input type='radio' value='{{i+1}}' name='radio' id='radio{{i+1}}' [(ngModel)]="radio" (click)="radio()" />
 </div> 

если вы не хотите использовать другой div, используйте атрибут [hidden] входного тега с тем же условием.

Надеюсь, это поможет .. :)

Answer 2

Вы можете использовать трубу.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myfilter',
  pure: false
})
export class MyFilterPipe implements PipeTransform {

  transform(value: any[], criteria: filterCriteria): any[] {
    if (!value || !criteria)
      return value;

    if(criteria.doFilter){
        return true;
    } else return items.filter(item => item.teamName.indexOf(filter) !== -1);
  }

}

export interface filterCriteria {
  property: string;
  descending?: boolean;
}

вам нужно добавить 2 formControls.Один для радиокнопки и один для фильтра.

<mat-form-field>
  <input matInput placeholder="Search" #search [formControl]="searchValue">
</mat-form-field>

<mat-radio-group [formControl]="doFilter">
  <mat-radio-button value="true">true</mat-radio-button>
  <mat-radio-button  value="false">false</mat-radio-button>
</mat-radio-group>

в вашем TS создайте эти контролы формы.

 searchValue = new FormControl('');
 doFilter = new FormControl(false);

В вашем ngДля добавления трубы фильтра.

<div *ngFor="let eachitem of myItems | myFilter:{ searchValue: searchValue.value, doFilter: doFilter.value }"></div>