Question

我有一个 JSON 列表，其中包含一些分类的音频文件及其URL。

export const musicList = [
  {
    'id': 0,
    'catName': 'upload',
    'audios': [
      {
        'id': 0,
        'name': 'crowd-cheering.mp3',
        'path': 'a.com/music.mp3'
      }
    ]
  },
  {
    'id': 1,
    'catName': 'rock',
    'audios': [
      {
        'id': 1,
        'name': 'Consectetur',
        'path': 'a.com/music.mp3'
      },
      {
        'id': 2,
        'name': 'Vivamus',
        'path': 'a.com/music.mp3'
      }
    ]
  },
  {
    'id': 2,
    'catName': 'folk',
    'audios': [
      {
        'id': 1,
        'name': 'Suspendisse',
        'path': 'a.com/music.mp3'
      }
    ]
  }
];

我用*ngFor列出了这些音乐，例如：

<div *ngFor="let music of musicList">
  <div *ngFor="let audio of music.audios"> 
    {{audio.name}}
  </div>
</div>

我也在用单选按钮列出他们的类别：

<div *ngFor="let category of musicList">
  <input type="radio" name="genre"> {{category.catName}}
</div>

我只想添加一个过滤器选项。我的意思是，当用户选择一个单选按钮时，列表应显示与所选类别相关的音频文件。

Angular CLI: 6.0.8
Typescript : 2.7.2

Answer 1

您可以使用ng-change并调用通过所需过滤器的函数

带单选按钮的角度过滤阵列

1 个答案: