javascript - 有没有办法找到使用绑定(bind)到事件的属性的数组元素，同时使用 ngfor 作为默认值？

Question

我正在数组上使用 ngFor 进行迭代。我想按另一个按钮，该按钮将根据该数组中数组对象 foo{bar:'New'} 的特定属性来过滤该数组。我想使用 NgFor 进行初始填充并使用事件来进一步过滤。这可能吗？数组中的对象

musicArray= [{
    artist:'Foo',
    emotion:'Sad',
    linker:'./assets/music/xx.mp3',
    myImg:'./assets/images/sad.jpeg'
},

填充数组的div:

<div *ngFor="let music of this.myTrack">

我想要过滤的属性:

<mat-card-title>{{music.emotion}}</mat-card-title>

这是一个我想用来过滤的按钮:

 <button mat-button (click)="myEvent($event)">

组件代码:

 myEvent(event) {
      event =   this.musicArray.find(x => x.emotion =="New") ; 
        this.myTrack = event;
        console.log(event);
        console.log(this.myTrack);        
        return this.myTrack;
      }

ngOnInit(){
    this.myTrack = this.musicArray;

    if(this.myEvent){
        return   this.myTrack.find(x => x.emotion =="New");
    }
}

目前我的事件返回了我想要的结果，但我只是不明白如何将其设置为 ngFor 数组。

Answer 1

array.find 总是只返回一个元素，而不是一个数组。你应该这样做

this.musicArray.filter(x => x.emotion =="New")

这将根据条件返回一个新数组。

根据我对您想要实现的目标的理解，您需要首先运行音乐列表

<div *ngFor="let music of this.myMusic">

那么我想说你需要在点击时传递想要的情感。这么说吧

<button mat-button (click)="myEvent($event, music.emotion)">

然后在组件上您只需进行过滤

myEvent(event, emotion) {
  this.musicArray =   this.musicArray.filter(x => x.emotion === emotion) ; 
  }