Question

我有一个页面，其中包含一些产品类别，包括价格，名称，评分。同样在我的侧边栏中，我有一个过滤选项。这些是使用单选按钮的选项。单击任何一个单选按钮时，应具有相同的产品并隐藏所有其他产品。如何实现这种过滤？

Answer 1

您可以使用管道。

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中创建这些formControls。

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

在ngFor中添加过滤器管道。

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

Answer 2

尝试此操作，这将隐藏未选中的单选按钮。

 <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] 属性。

希望这会有所帮助..：）

在单击单选按钮时，它应该显示正确的项目并隐藏所有其他内容

2 个答案: