ANGULAR：通过单击按钮进行数组过滤不起作用答案

【问题标题】：ANGULAR: array filter by clicking an button doesn't workANGULAR：通过单击按钮进行数组过滤不起作用
【发布时间】：2021-07-31 17:13:05
【问题描述】：

我正在尝试通过单击多个按钮在 id 上使用 modula 来过滤我的数组。我尝试使用管道，但建议仅使用 .filter()。我不知道该怎么做，我在网上看了很多视频，但它们太复杂了，或者我总是遇到一些他们没有的错误。或者我只是在一个简单的点击过滤器中走错了方向。我是 Angular 的初学者。

import { Component, OnInit} from '@angular/core';
import { StreamService } from '../stream.service';
import { Stream } from '../stream';
import { map } from 'rxjs/operators';


@Component({
  selector: 'app-discover',
  templateUrl: './discover.component.html',
  styleUrls: ['./discover.component.scss']
})
export class DiscoverComponent implements OnInit {
  streams!: Stream[];
  
  constructor(private streamService: StreamService) { 
    
  }

  ngOnInit() {
    this.getStreams();
  }

  getStreams(){
    this.streamService.getStream().subscribe((data =>{
      this.streams = data;
      console.log(this.streams);
    }))
  }

  sortBack(){
    this.streams.sort((a, b) => a.id - b.id);
  }


  filterIsUneven(){
    this.streams.filter(stream => stream.id % 3)
  };
  
  

}

<div class="container">

  <div class="buttons">
    <button (click) = "filterIsUneven()"> Games </button>
    <button> Music </button>
    <button> Esports </button>
    <button> IRL </button>
    <button>Back</button>
  </div>

  <div class="streams" *ngFor="let stream of streams">
    <h3>{{stream.id}}</h3>
    <h3>{{stream.title}}</h3>
    <img src="{{stream.thumbnailUrl}}">
  </div>

</div>

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Stream } from './stream';
import { Observable} from 'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class StreamService{

constructor(private http: HttpClient) { }

getStream():Observable<Stream[]>{
  return this.http.get<Stream[]>("https://jsonplaceholder.typicode.com/albums/1/photos");
  }

getLiveStream(id:number):Observable<Stream[]> {
  const url = `https://jsonplaceholder.typicode.com/albums/1/photos?id=${id}`;
  return this.http.get<Stream[]>(url);
  }
}

【问题讨论】：

filter 创建一个新数组，因为它是一个不可变的操作。它不会改变现有的。将您的 filterIsUneven 方法更改为：this.streams = this.streams.filter(stream => stream.id % 3)。

标签： arrays angular typescript filter

【解决方案1】：

您正在过滤，但没有分配结果，您应该这样做：

filterIsUneven(){
  this.streams = this.streams.filter(stream => stream.id % 3)
};

问题在于它是一个永久过滤器，您无法返回初始列表。然后你可以做一个新的列表：

getStreams(){
  this.streamService.getStream().subscribe((data =>{
    this.filteredStreams = data;
    this.streams = data;
    console.log(this.streams);
  }))
}

filterIsUneven(){
  this.filteredStreams = this.streams.filter(stream => stream.id % 3)
};

然后，在 HTML 中使用 filteredStreams 而不是 streams

【讨论】：

对不起，我没有复制粘贴你的答案（它还没有）。但解决方案非常明显，我们甚至为变量想出了相同的名称。
@mrak 这就是良好实践的力量哈哈

【解决方案2】：

“filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。”

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

所以你必须覆盖this.streams 属性：

  filterIsUneven(){
    this.streams = this.streams.filter(stream => stream.id % 3)
  };

我想这将适用于这种情况，但它是不可逆的。您可以引入一个新属性this.filteredStreams，使用原始值对其进行初始化并投影您的过滤器并使用它在ngFor 循环中显示。

【讨论】：