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

问题描述

尝试通过遵循官方教程来学习棱角(任何帮助表示赞赏

解决方案

1.存在无限循环时，会发生此错误.正如您已经提到的，当对 app-heroes 进行评论时，页面会加载，该页面可能被用作多个组件的选择器名称，这是不允许的.这可能会导致无限循环并无法加载组件.

1. 尝试进行以下修改，

hero.component.html

 < ul class ="heroes">< li * ngFor =让英雄英雄"(click)="onSelect(hero)" [class.selected] ="hero === selectedHero">< span class ="badge"> {{hero.id}}</span>{{英雄名字}}</li></ul>< app-hero-detail [hero] ="selectedhero"<//app-hero-detail> 

hero.detail.component.html

 < div * ngIf ="hero">< h2> {{hero.name}}详细信息</h2>< div>< span> id:</span> {{hero.id}}</div>< div><标签>名称:<输入[(ngModel)] ="hero.name" placeholder ="name"/></label></div></div> 

希望这会有所帮助.

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

the hero.component.html and detail code is as under:

<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

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

any help appreciated

解决方案

1.This error occur when there is an infinite loop.As you have mentioned that the page loads when app-heroes is commented, this might be used as selector-name for more than one component which is not allowed.This can cause an infinite loop and fail to load components.

1. Try making below edits,

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>

hero.detail.component.html

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

Hope this helps.

这篇关于Angular 7错误RangeError:超出最大调用堆栈大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！