我被卡住了on the third step of the Angular tour of heroes tutorial ,上次我检查时,在 Angular 2 和 4 中,这个解决方案有效。从那以后发生了什么变化?
这是我在浏览器控制台中遇到的错误的屏幕截图。
这是一个 link to my repo on Github.
在 HeroDetailComponent
中,我得到了这个。
import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
@Input() hero: Hero;
constructor() {}
ngOnInit() {}
}
hero-detail.component.html
<div *ngIf="hero">
<h2>{{ hero.name | uppercase }} Details</h2>
<div><span>id: </span>{{ hero.id }}</div>
<div>
<label
>name:
<input [(ngModel)]="hero.name" placeholder="name" />
</label>
</div>
</div>
在heroes.component.ts
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes = HEROES;
selectedHero: Hero;
constructor() {}
ngOnInit() {}
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
}
在模板文件中 -
<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>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
我怎样才能进入下一步?
最佳答案
而不是使用
<input [(ngModel)]="hero.name" placeholder="name" />
尝试使用
<input [value]="hero?.name" placeholder="name" />
更新 -
您还需要在 app.module 文件中添加您的详细信息组件,如下所示 -
@NgModule({
declarations: [AppComponent, HeroesComponent, HeroDetailComponent], <-- changes here
imports: [BrowserModule, AppRoutingModule, FormsModule],
providers: [],
bootstrap: [AppComponent]
})
关于angular - 无法绑定(bind)到 'hero',因为它不是 'app-hero-detail' 的已知属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54511488/