Question

我有一个数组，其中包含与3种动物相对应的一系列元素。我有“ n”个无线电输入来过滤这些动物。如果没有巧合，将不会显示任何内容，那么我想在没有巧合时显示一条消息。我不知道如何拥有最佳解决方案和可维护的代码。我可以有“ n”个输入广播我该怎么办？

<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
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value='dog'> dog
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value='cow'> cow
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value='bird'> bird
....
<ng-container *ngFor="let item of options">
    <p *ngIf="radio_option==item.animal || radio_option=='all'">
          {{item.animal}}
    </p>
</ng-container>

  options:any=[
    {
      "animal":"horse"
    },
    {
      "animal":"chicken"
    },
    {
      "animal":"cat"
    },
    {
      "animal":"horse"
    },
    {
      "animal":"chicken"
    },
    {
      "animal":"cat"
    }    
  ]
}

https://stackblitz.com/edit/angular-xphzkm?file=src/app/app.component.ts

Answer 1

这是解决方案：

<div [ngSwitch]="radio_option">
   <ng-container *ngFor="let item of options"> 
      <p *ngSwitchCase="item.animal">
        {{item.animal}}
      </p>
      <p *ngSwitchCase="'all'">
        {{item.animal}}
      </p>
   </ng-container>
   <p *ngSwitchDefault>
    No items found
   </p>
</div>

使用解决方案更新了您的代码：https://stackblitz.com/edit/angular-9ywf9d

当通过无线电输入过滤不显示匹配项时包含消息

1 个答案: