예외 : 배열 공급자가 없습니다! 생성자를 통해 변수를 초기화 할 때

Question

저는 현재 angular.io 웹 사이트를 통해 Angular2에 대해 학습하고 있습니다. dashboard.component.ts의 구현에 이어 (아래보기).

(A1 : 내 구현)

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

@Component({ 
    moduleId: module.id, 
    selector: 'my-dashboard', 
    templateUrl: 'dashboard.component.html' 
}) 
export class DashboardComponent implements OnInit{ 

    constructor(private heroes: Hero[], private heroService: HeroService){} 

    ngOnInit(){ 
     this.heroService.getHeroes().then(heroList => this.heroes = heroList.slice(1,5)) 
    } 

    goToDetail(hero: Hero):void{ 

    } 

} 

나는 다음과 같은 오류가 발생합니다.

(A2 : 스택 트레이스) 나는 그것을 웹 페이지 (아래보기 추출물)에있는 같은 방법을 쓸 때

EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: No provider for Array! 
ORIGINAL STACKTRACE: 
Error: Uncaught (in promise): Error: Error in http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: No provider for Array! 
    at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:429:31) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:406:13 
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:203:28) 
    at Object.onInvoke (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6242:41) 
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:202:34) 
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:96:43) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:462:57 
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:236:37) 
    at Object.onInvokeTask (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6233:41) 
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:235:42) 
Unhandled Promise rejection: Error in http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: No provider for Array! ; Zone: angular ; Task: Promise.then ; Value: Error: Error in http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: No provider for Array! {...} Error: No provider for Array! 
    at NoProviderError.Error (native) 
    at NoProviderError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1255:38) 
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1739:20) 
    at new NoProviderError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1770:20) 
    at ReflectiveInjector_._throwOrNull (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3366:23) 
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3394:29) 
    at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3357:29) 
    at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3166:25) 
    at NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7222:56) 
    at ElementInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9303:52) 
Error: Uncaught (in promise): Error: Error in http://localhost:3000/app/dashboard.component.js class DashboardComponent_Host - inline template:0:0 caused by: No provider for Array! {...} 

그러나, 나는 더 이상 오류 (A2)을받을 수 없습니다. 왜 이런 일이 일어나는 걸까요?

(A3 : 튜토리얼 의해 제공 구현) 생성자 I 구현 방법 (A1)을 규정하는 튜토리얼

export class DashboardComponent implements OnInit { 

    heroes: Hero[] = []; 

    constructor(private heroService: HeroService) { } 

    ngOnInit(): void { 
    this.heroService.getHeroes() 
     .then(heroes => this.heroes = heroes.slice(1, 5)); 
    } 

    gotoDetail(hero: Hero): void { /* not implemented yet */} 
} 

는 가이드 (A3)에 의해 제공되는 코드와 동일한 결과가 있어야 영웅 목록을 초기화하는 조건 내가 놓친 게 있니?

Answer 1

그렇습니다. 첫 번째 방법은 생성자가 Hero[] 유형의 추가 매개 변수를 가지고 있으며 Angular가 해당 생성자를 호출하여 필요한 인수를 제공하고 인스턴스를 제공하는 공급자를 찾아야한다는 사실을 놓쳤습니다. Hero[]을 생성자로 전달하십시오.

구성 요소를 구성 할 때 Angular가 영웅을 통과해서는 안되기 때문에 영웅을 생성자의 일부로 사용하면 안됩니다. 이 구성 요소는 서비스를 사용하여 영웅을 가져옵니다.