Angular 2教程,路由部分的未处理的承诺拒绝

发布时间：2020-12-17 08:19:54 所属栏目：安全来源：网络整理

导读：我正在尝试遵循官方教程。一切顺利，直到路由部分 here.当我到达我们重新设计app.component.ts并更改app.module.ts的部分，我得到一个加载屏幕在本地主机，控制台错误是： Unhandled Promise rejection: Template parse errors: Can’t bind to ‘hero’ sin

我正在尝试遵循官方教程。一切顺利，直到路由部分 here.当我到达我们重新设计app.component.ts并更改app.module.ts的部分，我得到一个加载屏幕在本地主机，控制台错误是：

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

我确保这不是我以前在本教程中通过从here复制粘贴相关文件而造成的错误。该项目的工作方式与plunker上的显示一样。

我的问题是，如果在早期版本中工作，那么导致该承诺失败的原因，以及在哪里可以了解如何解决它？

代码摘录：

来自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';
}

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

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

EDITED修复plunkr链接

我在本教程后面出现了同样的错误。他们可能错过了app.module.ts的一点变化。 HeroDetailComponent尚未导入并添加到声明数组中。因此，这个组件的财产英雄是未知的。

添加导入以及相应的声明应该会解决这个问题：

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文件中找到此更改。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!