2
votes

Impossible de se lier à 'hero' car ce n'est pas une propriété connue de 'app-hero-detail'

Je suis coincé sur la troisième étape du didacticiel Angular Tour of Heroes , dernier fois que j'ai vérifié, dans Angular 2 et 4, cette solution a fonctionné. Qu'est-ce qui a changé depuis?

Voici la capture d'écran de l'erreur que j'obtiens dans la console du navigateur.

Et voici un lien vers mon dépôt sur Github.

Dans HeroDetailComponent , j'ai ceci.

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

hero-detail.component.html

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

Dans heroes.component.ts

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

dans le fichier modèle -

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() {}
}

Comment puis-je passer à l'étape suivante?

angular

2 commentaires

Veuillez poster votre code ici car les liens peuvent mourir à l'avenir.

Incluez le code de votre modèle à partir du fichier ts. Et ne vous attendez pas à ce que les gens vont chercher dans votre source pour trouver le truc d'écriture

6 Réponses :

2
votes

Au lieu d'utiliser

@NgModule({
  declarations: [AppComponent, HeroesComponent, HeroDetailComponent],   <-- changes here
  imports: [BrowserModule, AppRoutingModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})

, essayez d'utiliser

<input [value]="hero?.name" placeholder="name" />

Update -

Vous devez également ajouter votre détails du composant dans le fichier app.module comme ci-dessous -

<input [(ngModel)]="hero.name" placeholder="name" />

2 commentaires

Oui, je l'ai dans mon repo bro, j'ai mis à jour ma question avec plus de vérification d'extrait de code ici - github.com/psa007/angular-tour-of-heroes/blob/…

githubular.com/psa007/angular.com tour-of-heroes / blob /… Je vérifie ici

0
votes

Assurez-vous que vous disposez d'un @Input () hero dans le composant app-hero-detail . L'erreur est générée lorsque vous attribuez une propriété qui n'est pas définie dans le composant.

Il se peut également que app-hero-detail ne fasse pas partie de la propriété array declarations du @NgModule < / p>

Mise à jour: https://stackblitz.com/github/psa007/angular-tour-of- héros

Vous démarrez le mauvais AppModule! Dans le fichier main.ts , vous chargez un autre AppModule et non le app.module.ts

1 commentaires

Merci @Dhananjai J'ai tout cela dans mon code. Ici - github.com/psa007/angular-tour-of-heroes/blob/... et ici - github.com/psa007/angular-tour-of-heroes/blob/…

2
votes

Je ne donne pas si cela aide mais essayez d'importer HeroDetailComponent dans votre déclarations tableau de hero.component.spec.ts

Vous devez le faire pour éviter d'échouer les tests

0 commentaires

1
votes

Vous avez deux fichiers Appmodule, l'un est app.module.ts et un autre AppModule et votre main.ts pointe vers AppModule Dans lequel vous n'avez pas inclus heroDetailsComponent

angular-tour-of-heroes / 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 {
}

0 commentaires

0
votes

Ajoutez l'instruction hero: Hero à heroesComponent.ts

0 commentaires

0
votes

Fichier:
src / app / hero-detail / hero-detail.component.ts

Détails:
1. Ajoutez la ligne qui est donnée comme "Ajouter cette ligne" ci-dessous:
2. si cela ne résout pas le problème, vous enregistrez trop vite ou votre ordinateur est lent, alors ajoutez une nouvelle ligne vierge (appuyez sur Entrée) et enregistrez-la à nouveau pour que ng-serve le prenne correctement.
3. si plus de deux ne sont pas résolus, vérifiez tous les fichiers donnés dans la révision du code à: 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() {
  }

}

0 commentaires