上次我在Angular 2和4中进行检查时,我陷入了on the third step of the Angular tour of heroes tutorial的困境,此解决方案有效。从那以后发生了什么变化?
这是我在浏览器控制台中遇到的错误的屏幕截图。
在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>
如何进入下一步?
答案 0 :(得分:2)
代替使用
<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]
})
答案 1 :(得分:1)
我不知道是否有帮助,但尝试将HeroDetailComponent
的{{1}}数组中的declarations
导入
您必须这样做以避免测试失败
答案 2 :(得分:1)
您有两个Appmodule文件,一个是app.module.ts,另一个是AppModule,而main.ts指向的是AppModule,因为您没有包括heroDetailsComponent
英雄角游记/src/app/AppModule.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
@NgModule({
declarations: [AppComponent, HeroesComponent, HeroDetailComponent ],
imports: [BrowserModule, AppRoutingModule, FormsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
答案 3 :(得分:1)
将近 2 年后,我在 Angular 11 上,我在教程之后遇到了完全相同的问题。有那么一瞬间,我以为这是教程中的错误或某些步骤,但实际上在我的情况下,这是更具欺骗性的东西,我花了几个小时才解决。
事实证明,当我们最初按照教程进行操作时,我们并没有定义这一行:
@Input() 英雄:英雄;
这部分代码将在接下来的步骤中添加。错误信息是因为当前缺少此行!
但是如果我们在添加之前犯了一个语法错误,可能是“ng serve”停止正常工作,因此停止正确“刷新”部分文件。
这会导致它显示相同的旧错误消息,尽管添加了使其消失所需的代码。
因此,即使在以下步骤中添加了该行,由于“ng serve”未正确刷新,仍会继续显示相同的消息。
要修复它,只需使用“CTRL + C”将“ng serve”放在控制台上,然后键入“ng serve”再次启动它,一切都会开始正常工作。
答案 4 :(得分:0)
确保在@Input() hero
组件中有一个app-hero-detail
。
当您分配组件中未定义的属性时,将引发错误。
也有可能app-hero-detail
不是declarations
的{{1}}数组属性的一部分
更新: https://stackblitz.com/github/psa007/angular-tour-of-heroes
您正在引导错误的AppModule!
在@NgModule
文件中,您正在加载另一个AppModule,而不是app.module.ts
答案 5 :(得分:0)
将指令hero: Hero
添加到heroesComponent.ts
答案 6 :(得分:0)
文件:
src / app / hero-detail / hero-detail.component.ts
详细信息:
1.在下面添加名为“添加此行”的行:
2.如果仍不能解决问题,则说明保存速度太快,或者计算机运行缓慢,因此请添加新的空白行(按Enter键)并再次保存,以便ng-serve正确使用它。
3.如果以上两个方法都不能解决问题,请检查位于https://angular.io/tutorial/toh-pt3#final-code-review
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; /// <----------------------------- *** add this line (and save file)
constructor() { }
ngOnInit() {
}
}
答案 7 :(得分:0)
在 hero-detail.component.ts 中
@Input() hero?: Hero;