Question

我目前通过angular.io网站了解Angular2。执行dashboard.component.ts后（见下文）。

（A1：我的实施）

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="testTreeView" EventName="SelectedNodeChanged" />
    </Triggers>

    <ContentTemplate>
        <table style="width: 100%;">
            <tr>
                <td>
                    <asp:TreeView ID="testTreeView" runat="server" Height="304px" OnSelectedNodeChanged="testTreeView_SelectedNodeChanged" Width="257px">
                        <LeafNodeStyle ForeColor="Yellow" />
                    </asp:TreeView>
                </td>
                <td>
                    <asp:ListBox ID="ListBox1" runat="server" Height="276px" Width="305px"></asp:ListBox>
                </td>
            </tr>
        </table>
    </ContentTemplate>
</asp:UpdatePanel>

我收到以下错误。

（A2：Stacktrace）

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）。为什么会这样？

（A3：教程提供的实施）

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! {...}

从教程中，按照我实现的方式（A1）定义构造函数应该与创建初始化英雄列表方面的教程（A3）提供的代码具有相同的结果。我错过了什么吗？

Answer 1

是的，你错过了第一种方式，你的构造函数有一个类型为Hero[]的附加参数的事实，并且Angular需要调用该构造函数，从而提供所需的参数，从而找到一个提供者，提供Hero[]的实例传递给您的构造函数。

你应该没有将英雄作为构造函数的一部分，因为Angular在构造组件时不能传递英雄。该组件使用该服务自行获取英雄。

例外：没有Array的提供者！通过构造函数简写初始化变量时

1 个答案: