角度：错误 RangeError：超出最大调用堆栈大小答案

【问题标题】：ANGULAR: ERROR RangeError: Maximum call stack size exceeded角度：错误 RangeError：超出最大调用堆栈大小
【发布时间】：2021-07-31 15:18:10
【问题描述】：

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

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)
    console.log(this.filterIsUneven());
  };
  
  

}

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);
  }
}

<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>

【问题讨论】：

filterIsUneven 函数中的无限循环。
是的，我该如何阻止它，我尝试使用 if 函数但它也不起作用，或者我只是写了一个错误的 if 函数。
if 不是“函数”而是条件。没有人会知道，如果你“只是写错了”，如果你不显示它。但可能你这样做了，否则递归就会停止。
删除 console.log。
@derpirscher 你是对的，这是我使用的 if 条件``` if (this.streams.filter(stream => stream.id % 3)) { return;"````但我觉得它错了，它对如何将它与 .filter(); 混合感到困惑；

标签： arrays angular typescript filtering

【解决方案1】：

filterIsUneven 中的

console.log() 导致无限递归。删除控制台日志，应该没问题。

【讨论】：