Question

我有一个数组，其中包含与3种动物相对应的一系列元素。我有3个无线电输入可以过滤这些动物。我希望当您从特定动物中选择广播输入时，其他动物会消失。但是，如果您选择“显示全部”选项，则会显示全部。最好的方法是什么？

我想问这个问题，因为也许可以从视图中完成所有操作，而不必在组件中执行循环或类似操作。

component.html

<input type="radio" name="radio_option" [(ngModel)]="radio_option" value="all" /> show all
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value="horse" /> Horse
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value="chicken" /> Chicken
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value="cat" /> Cat
<p *ngFor="let item of options">
  {{ item.animal }}
</p>

component.ts

const options: any[] = [
  {
    animal: 'horse'
  },
  {
    animal: 'chicken'
  },
  {
    animal: 'cat'
  },
  {
    animal: 'horse'
  },
  {
    animal: 'chicken'
  },
  {
    animal: 'cat'
  }
];

Answer 1

我会做以下事情：

<ng-container *ngFor="let item of options">
     <p *ngIf="radio_option==item.animal || radio_option=='all'">
          {{item.animal}}
     </p>
</ng-container>

只有选择全部显示或选择特定动物时，它才会显示动物

如何通过无线电输入过滤我的物品？

1 个答案: