无法绑定到“英雄”,因为它不是“ app-hero-detail”的已知属性

时间:2019-02-04 07:07:16

标签: angular

上次我在Angular 2和4中进行检查时,我陷入了on the third step of the Angular tour of heroes tutorial的困境,此解决方案有效。从那以后发生了什么变化?

这是我在浏览器控制台中遇到的错误的屏幕截图。

enter image description here

这是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>

如何进入下一步?

8 个答案:

答案 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;