带有单选按钮的角度过滤数组-Java 学习之路

我有一个 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

1 回答

0

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

回复于 2024-05-04T15:25:13+08:00

带有单选按钮的角度过滤数组

1 回答

相关问题