Angular 7 错误 RangeError：超出最大调用堆栈大小

Question

I am trying to learn angular by following the official tutorial but when following steps for hero component and hero detail component , it raises an error "RangeError: Maximum call stack size exceeded".我正在尝试按照官方教程学习角度，但是在执行hero component和hero detail component的步骤时，它会引发错误“RangeError：超出最大调用堆栈大小”。

The hero.component.html : hero.component.html ：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

The detail component : detail component ：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

The hero component hero component

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

The hero.detail component hero.detail component

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without an error需要提一提的是，当<app-heroes></app-heroes>被评论时，列表页加载无误

any help is appreciated任何帮助表示赞赏

Answer 1

am trying to learn angular by following the official tutorial ( https://angular.io/tutorial/ ) but when following steps for hero component and hero detail component, it raises an error "RangeError: Maximum call stack size exceeded" .我试图通过遵循官方教程（ https://angular.io/tutorial/ ）学习angular，但是当按照英雄组件和英雄详细信息组件的步骤进行操作时，会引发错误“ RangeError：超出最大调用堆栈大小”。

the hero.component.html and detail code is as under: hero.component.html和详细代码如下：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

for detail:有关详细信息：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

hero component英雄组成

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

hero.detail component hero.detail组件

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without error要提及的一件事是，在对<app-heroes></app-heroes>进行注释时，将加载列表页面而不会出现错误

any help appreciated任何帮助表示赞赏

Answer 2

am trying to learn angular by following the official tutorial ( https://angular.io/tutorial/ ) but when following steps for hero component and hero detail component, it raises an error "RangeError: Maximum call stack size exceeded" .我试图通过遵循官方教程（ https://angular.io/tutorial/ ）学习angular，但是当按照英雄组件和英雄详细信息组件的步骤进行操作时，会引发错误“ RangeError：超出最大调用堆栈大小”。

the hero.component.html and detail code is as under: hero.component.html和详细代码如下：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

for detail:有关详细信息：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

hero component英雄组成

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

hero.detail component hero.detail组件

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without error要提及的一件事是，在对<app-heroes></app-heroes>进行注释时，将加载列表页面而不会出现错误

any help appreciated任何帮助表示赞赏

Answer 3

am trying to learn angular by following the official tutorial ( https://angular.io/tutorial/ ) but when following steps for hero component and hero detail component, it raises an error "RangeError: Maximum call stack size exceeded" .我试图通过遵循官方教程（ https://angular.io/tutorial/ ）学习angular，但是当按照英雄组件和英雄详细信息组件的步骤进行操作时，会引发错误“ RangeError：超出最大调用堆栈大小”。

the hero.component.html and detail code is as under: hero.component.html和详细代码如下：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

for detail:有关详细信息：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

hero component英雄组成

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

hero.detail component hero.detail组件

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without error要提及的一件事是，在对<app-heroes></app-heroes>进行注释时，将加载列表页面而不会出现错误

any help appreciated任何帮助表示赞赏

Answer 4

am trying to learn angular by following the official tutorial ( https://angular.io/tutorial/ ) but when following steps for hero component and hero detail component, it raises an error "RangeError: Maximum call stack size exceeded" .我试图通过遵循官方教程（ https://angular.io/tutorial/ ）学习angular，但是当按照英雄组件和英雄详细信息组件的步骤进行操作时，会引发错误“ RangeError：超出最大调用堆栈大小”。

the hero.component.html and detail code is as under: hero.component.html和详细代码如下：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

for detail:有关详细信息：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

hero component英雄组成

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

hero.detail component hero.detail组件

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without error要提及的一件事是，在对<app-heroes></app-heroes>进行注释时，将加载列表页面而不会出现错误

any help appreciated任何帮助表示赞赏

Answer 5

am trying to learn angular by following the official tutorial ( https://angular.io/tutorial/ ) but when following steps for hero component and hero detail component, it raises an error "RangeError: Maximum call stack size exceeded" .我试图通过遵循官方教程（ https://angular.io/tutorial/ ）学习angular，但是当按照英雄组件和英雄详细信息组件的步骤进行操作时，会引发错误“ RangeError：超出最大调用堆栈大小”。

the hero.component.html and detail code is as under: hero.component.html和详细代码如下：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

for detail:有关详细信息：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

hero component英雄组成

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

hero.detail component hero.detail组件

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without error要提及的一件事是，在对<app-heroes></app-heroes>进行注释时，将加载列表页面而不会出现错误

any help appreciated任何帮助表示赞赏

Answer 6

am trying to learn angular by following the official tutorial ( https://angular.io/tutorial/ ) but when following steps for hero component and hero detail component, it raises an error "RangeError: Maximum call stack size exceeded" .我试图通过遵循官方教程（ https://angular.io/tutorial/ ）学习angular，但是当按照英雄组件和英雄详细信息组件的步骤进行操作时，会引发错误“ RangeError：超出最大调用堆栈大小”。

the hero.component.html and detail code is as under: hero.component.html和详细代码如下：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

for detail:有关详细信息：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

hero component英雄组成

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

hero.detail component hero.detail组件

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without error要提及的一件事是，在对<app-heroes></app-heroes>进行注释时，将加载列表页面而不会出现错误

any help appreciated任何帮助表示赞赏

Answer 7

am trying to learn angular by following the official tutorial ( https://angular.io/tutorial/ ) but when following steps for hero component and hero detail component, it raises an error "RangeError: Maximum call stack size exceeded" .我试图通过遵循官方教程（ https://angular.io/tutorial/ ）学习angular，但是当按照英雄组件和英雄详细信息组件的步骤进行操作时，会引发错误“ RangeError：超出最大调用堆栈大小”。

the hero.component.html and detail code is as under: hero.component.html和详细代码如下：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

for detail:有关详细信息：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

hero component英雄组成

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

hero.detail component hero.detail组件

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without error要提及的一件事是，在对<app-heroes></app-heroes>进行注释时，将加载列表页面而不会出现错误

any help appreciated任何帮助表示赞赏

Answer 8

am trying to learn angular by following the official tutorial ( https://angular.io/tutorial/ ) but when following steps for hero component and hero detail component, it raises an error "RangeError: Maximum call stack size exceeded" .我试图通过遵循官方教程（ https://angular.io/tutorial/ ）学习angular，但是当按照英雄组件和英雄详细信息组件的步骤进行操作时，会引发错误“ RangeError：超出最大调用堆栈大小”。

the hero.component.html and detail code is as under: hero.component.html和详细代码如下：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

for detail:有关详细信息：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

hero component英雄组成

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

hero.detail component hero.detail组件

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without error要提及的一件事是，在对<app-heroes></app-heroes>进行注释时，将加载列表页面而不会出现错误

any help appreciated任何帮助表示赞赏

Answer 9

This happened when I was subscribing to an observable more frequently than required.这发生在我比要求更频繁地订阅 observable 时。 I was subscribing to the below observable on every Enter key press,每次按 Enter 键时，我都订阅了以下可观察的内容，

this.filteredOptions.subscribe((res) => this.addSelectedContacts(event, res[keyManager.activeItemIndex]))

This was obviously not required, I had to limit the observable to only get the first emission by adding pipe( take(1) ) as,这显然不是必需的，我不得不通过添加 pipe( take(1) ) 来限制 observable 仅获得第一个发射，

this.filteredOptions.pipe(take(1)).subscribe((res) => this.addSelectedContacts(event, res[keyManager.activeItemIndex]))

You might also use the swithMap operator syntax to dismiss previous subscriptions.您还可以使用swithMap运算符语法来取消以前的订阅。

Answer 10

am trying to learn angular by following the official tutorial ( https://angular.io/tutorial/ ) but when following steps for hero component and hero detail component, it raises an error "RangeError: Maximum call stack size exceeded" .我试图通过遵循官方教程（ https://angular.io/tutorial/ ）学习angular，但是当按照英雄组件和英雄详细信息组件的步骤进行操作时，会引发错误“ RangeError：超出最大调用堆栈大小”。

the hero.component.html and detail code is as under: hero.component.html和详细代码如下：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

for detail:有关详细信息：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

hero component英雄组成

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

hero.detail component hero.detail组件

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without error要提及的一件事是，在对<app-heroes></app-heroes>进行注释时，将加载列表页面而不会出现错误

any help appreciated任何帮助表示赞赏

Answer 11

am trying to learn angular by following the official tutorial ( https://angular.io/tutorial/ ) but when following steps for hero component and hero detail component, it raises an error "RangeError: Maximum call stack size exceeded" .我试图通过遵循官方教程（ https://angular.io/tutorial/ ）学习angular，但是当按照英雄组件和英雄详细信息组件的步骤进行操作时，会引发错误“ RangeError：超出最大调用堆栈大小”。

the hero.component.html and detail code is as under: hero.component.html和详细代码如下：

<ul class="heroes">
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<!-- 
<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


<app-heroes></app-heroes>

for detail:有关详细信息：

<div *ngIf="hero">

  <h2>{{hero.name}} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

hero component英雄组成

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

hero.detail component hero.detail组件

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }

}

one thing to mention is that when <app-heroes></app-heroes> is commented, the list page is loaded without error要提及的一件事是，在对<app-heroes></app-heroes>进行注释时，将加载列表页面而不会出现错误

any help appreciated任何帮助表示赞赏

Answer 12

Angular 12角 12

I encounter this on a infinite loop which causes ui to change on every iteration.我在无限循环中遇到这个问题，这会导致 ui 在每次迭代时都发生变化。

Angular 7 错误 RangeError：超出最大调用堆栈大小

问题描述

12 个解决方案

解决方案1
30 已采纳 2018-12-13 07:00:21

解决方案2
7 2018-12-13 07:01:03

解决方案3
5 2019-08-05 02:15:39

解决方案4
3 2018-12-13 07:29:05

解决方案5
3 2020-06-21 12:04:16

解决方案6
2 2020-01-14 12:50:52

解决方案7
2 2020-03-13 10:13:10

解决方案8
2 2020-03-16 22:11:40

解决方案9
1 2022-04-29 07:31:34

解决方案10
0 2020-06-01 00:20:44

解决方案11
0 2020-10-06 11:12:25

解决方案12
0 2022-07-21 12:36:58

Angular 7 错误 RangeError：超出最大调用堆栈大小

问题描述

12 个解决方案

解决方案1 30 已采纳 2018-12-13 07:00:21

解决方案2 7 2018-12-13 07:01:03

解决方案3 5 2019-08-05 02:15:39

解决方案4 3 2018-12-13 07:29:05

解决方案5 3 2020-06-21 12:04:16

解决方案6 2 2020-01-14 12:50:52

解决方案7 2 2020-03-13 10:13:10

解决方案8 2 2020-03-16 22:11:40

解决方案9 1 2022-04-29 07:31:34

解决方案10 0 2020-06-01 00:20:44

解决方案11 0 2020-10-06 11:12:25

解决方案12 0 2022-07-21 12:36:58

解决方案1
30 已采纳 2018-12-13 07:00:21

解决方案2
7 2018-12-13 07:01:03

解决方案3
5 2019-08-05 02:15:39

解决方案4
3 2018-12-13 07:29:05

解决方案5
3 2020-06-21 12:04:16

解决方案6
2 2020-01-14 12:50:52

解决方案7
2 2020-03-13 10:13:10

解决方案8
2 2020-03-16 22:11:40

解决方案9
1 2022-04-29 07:31:34

解决方案10
0 2020-06-01 00:20:44

解决方案11
0 2020-10-06 11:12:25

解决方案12
0 2022-07-21 12:36:58