gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 16:51:33 25 4
gpt4 key购买 nike

我正在尝试按照官方教程进行操作。一切顺利,直到路由部分 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 上显示的方式工作。

我的问题是,是什么导致 promise 在早期版本中运行时失败,我在哪里可以学习如何修复它?

代码摘录:

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

已编辑以修复 plunkr 链接

最佳答案

我按照教程遇到了同样的错误。他们可能错过了 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 文件中发现此更改。

关于Angular 2教程,路由部分未处理的 promise 拒绝,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38884167/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com