角度：錯誤 RangeError：超出最大調用堆棧大小 (ANGULAR: ERROR RangeError: Maximum call stack size exceeded)

問題描述

角度：錯誤 RangeError：超出最大調用堆棧大小 (ANGULAR: ERROR RangeError: Maximum call stack size exceeded)

我正在嘗試通過單擊多個按鈕在 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>

參考解法

方法 1:

console.log() in filterIsUneven is causing endless recursion. Remove console log and it should be fine.

(by swordsan、tomek550)

參考文件

1. ANGULAR: ERROR RangeError: Maximum call stack size exceeded (CC BY‑SA 2.5/3.0/4.0)