Angular 2教程，路由部分中未处理的promise拒绝 [英] Angular 2 Tutorial, unhandled promise rejection on routing section

问题描述

我正在尝试遵循官方教程.一切顺利，直到此处.当我到达重新制作app.component.ts并更改app.module.ts的部分时，我在本地主机上得到一个加载屏幕，控制台错误是:

I am attempting to follow the official tutorial. Everything went well until the Routing section here. When I reach the section where we remake app.component.ts and change the app.module.ts, I get a loading screen on localhost, console error is:

未处理的承诺拒绝:模板解析错误: 无法绑定到英雄"，因为它不是我的英雄细节"的已知属性.

Unhandled Promise rejection: Template parse errors: Can't bind to 'hero' since it isn't a known property of 'my-hero-detail'.

我通过复制

I ensured that it wasn't a mistake I may have made previously in the tutorial by copy pasting relevant files from here. The project works exactly as shown on the plunker.

我的问题是，在较早版本中运行诺言时，是什么导致诺言失败的?我在哪里可以学习如何解决?

My question is what is causing the promise to fail when it works in earlier versions, and where can I learn how to fix it?

代码摘录:

来自app.component.ts

From app.component.ts

import { Component, OnInit } from '@angular/core';

import { Hero } from './hero';
import { HeroService } from './hero.service';

@Component({
selector: 'my-heroes',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
`,

...

export class HeroesComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;

constructor(private heroService: HeroService) { }

getHeroes() {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}

ngOnInit() {
  this.getHeroes();
}

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

来自app.component.ts

From app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <my-heroes></my-heroes>
  `
})
export class AppComponent {
  title = 'Tour of Heroes';
}

来自app.module.ts

from app.module.ts

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { AppComponent }   from './app.component';
import { HeroesComponent }  from './heroes.component';
import { HeroService }  from './hero.service';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  providers: [
    HeroService
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

来自hero-detail.component.ts

from hero-detail.component.ts

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

@Component({
  selector: 'my-hero-detail',
  template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div>
        <label>id: </label>{{hero.id}}
      </div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
      </div>
    </div>
  `
})
export class HeroDetailComponent {
  @Input() hero: Hero;
}

编辑以修复插件链接

推荐答案

在学习本教程后，我遇到了同样的错误.他们可能会错过app.module.ts中的一些小变化. HeroDetailComponent尚未导入并添加到声明数组.因此，该组件的属性hero是未知的.

I got the same error following the tutorial. They might missed a little change in the app.module.ts. The HeroDetailComponent has not been imported and added to the declaration array. Hence the property hero of this component is unknown.

添加导入以及相应的声明应该可以解决此问题:

Adding the import as well as the respective declaration should fix this problem:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';

import { HeroService } from './hero.service';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [
        AppComponent,
        HeroesComponent,
        HeroDetailComponent
    ],
    providers: [
        HeroService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

我认为他们忘记记录该更改.如果您查看下一章( https://angular.io/docs/ts/最新/教程/toh-pt6.html )，您将在app.module.js文件中找到此更改.

I assume they forgot to document that change. If you take a look into the next chapter (https://angular.io/docs/ts/latest/tutorial/toh-pt6.html) you will find this change in the app.module.js file.

这篇关于Angular 2教程，路由部分中未处理的promise拒绝的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！