Angular 2教程，未處理的承諾拒絕路由部分

Question

我試圖按照官方教程。一切進展順利，直到路由部分here。當我到了那裏，我們重拍app.component.ts和改變app.module.ts的部分，我得到本地主機上加載屏幕，控制檯的錯誤是：

未處理的承諾拒絕：模板解析錯誤： 能與'英雄'綁定，因爲它不是「我的英雄 - 細節」的已知屬性。

我確保這不是我以前在教程中通過複製粘貼here相關文件所犯的錯誤。該項目的工作原理與蹲跳者一樣。

我的問題是什麼導致承諾失敗，當它在早期版本，我在哪裏可以學習如何解決它？

代碼摘錄：

從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

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

從應用程序。 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 { 
} 

從英雄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; 
} 

編輯如果你讀下來幾個段落（更像30段），以解決plunkr鏈接

Answer 1

我得到了下面的教程同樣的錯誤。他們可能會錯過app.module.ts中的一點變化。尚未導入HeroDetailComponent並將其添加到聲明數組中。因此該組件的屬性hero未知。

增加進口，以及相應的申報應該可以解決這個問題：

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/latest/tutorial/toh-pt6.html），您會在app.module.js文件中發現此更改。

Answer 2

，你會看到

使用<my-hero-detail>標記刪除模板的最後一行。

這將停止錯誤

我學習完本教程現在實際上是尋找答案哈哈

Answer 3

我有相同的問題，我已經做了如下修改讓它再次部分5工作：

1. Change the files as documented in Lukas Melzer's answer

2. 導入HeroService並添加HeroService作爲應用提供商。 component.ts：

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

隨着論文的變化我沒有更多的錯誤。現在，標題也會出現兩次，就像我期望的那樣（從heroes.component和app.component中調用）。我刪除了heroes.component中的一個。

Answer 4

我收到了同樣的錯誤消息，但我的錯誤是使用文件名的大寫字母（大寫字母C在./hero-detail.Component是問題）：從'./hero-detail.Component' import { HeroDetailComponent};

Answer 5

我有同樣的問題。 在我的情況下，它幫助將完整的@ Component-Part從文件「hero-detail.component.ts」複製到文件「app.component.ts」中。重新啓動應用程序後，它工作正常。它仍然有效，即使我解決了我的更改。

在我看來，有什麼是在緩存中 - 並通過這個動作，緩存被清除。

Answer 6

我發現成功的這樣做：

• 從heroes.component.ts模板刪除<my-hero-detail [hero]="selectedHero"></my-hero-detail>（目前在heroes.component.ts文件仍然）

這裏是如何的英雄。 component.ts文件看起來前後：

前：

... top file contents ... 

@Component({ 
    selector: 'my-heroes', 
    template: ` 
     <h2>My Heroes</h2> 
     <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> 

     <my-hero-detail [hero]="selectedHero"></my-hero-detail> 
     `, 

... remaining file ... 

後：

... top file contents ... 

@Component({ 
    selector: 'my-heroes', 
    template: ` 
     <h2>My Heroes</h2> 
     <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> 
     `, 

... remaining file ... 

Answer 7

你總是可以參考

運行live example對於這部分。

我的問題是在live example

編輯app.module.ts按固定後我編輯以下部分：

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

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeroDetailComponent 
    ], 

Answer 8

對於我所經歷的邊緣的情況下，確保重建！ ng serve上的watch不會觀察目錄，而是監視初始構建中使用的文件。它不會傳輸新頁面。避免在這裏跳出窗口。