Angular2: imansible leggere il ‘nome’ della proprietà di undefined

Sto iniziando a imparare Angular2. Ho seguito il tutorial di Heroes fornito su angular.io. Tutto funzionava bene fino a quando, infastidito dalla confusione dell’HTML che utilizzava il modello, ho usato l’URL del modello al suo posto e ho spostato l’HTML in un file denominato hero.html. L’errore che viene generato è “Imansible leggere la proprietà ‘nome’ di undefined”. Stranamente, è ansible accedere alla variabile degli eroi che punta a una serie di oggetti in modo che ngFor produca la quantità corretta di tag “li” in base al numero di oggetti nell’array. Tuttavia, non è ansible accedere ai dati degli oggetti dell’array. Inoltre, anche una semplice variabile contenente un testo, non verrà visualizzata utilizzando le parentesi {{}} nell’HTML (vedere codice fornito).

app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './hero.html', styleUrls:['./styles.css'] }) export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; selectedHero:Hero; onSelect(hero: Hero):void{ this.selectedHero = hero; } } export class Hero{ id: number; name: string; } const HEROES: Hero[] = [ { id: 1, name: 'Mr. Nice' }, { id: 2, name: 'Narco' }, { id: 3, name: 'Bombasto' }, { id: 4, name: 'Celeritas' }, { id: 5, name: 'Magneta' }, { id: 6, name: 'RubberMan' }, { id: 7, name: 'Dynama' }, { id: 8, name: 'Dr IQ' }, { id: 9, name: 'Magma' }, { id: 10, name: 'Tornado' } ]; 

hero.html

 

{{title}}

My Heroes

  • {{hero.id}} {{hero.name}}

{{hero.name}} details!

{{hero.id}}

Ecco una foto:

inserisci la descrizione dell'immagine qui

La variabile selectedHero è nullo nel modello, quindi non è ansible associare selectedHero.name così com’è. È necessario utilizzare l’operatore elvis per questo caso:

  

La separazione di [(ngModel)] in [ngModel] e (ngModelChange) è necessaria anche perché non è ansible assegnare a un’espressione che utilizza l’operatore elvis.

Penso anche che tu intenda usare:

 

{{selectedHero?.name}} details!

invece di:

 

{{hero.name}} details!

Dovevi solo leggere un po ‘oltre e saresti stato introdotto nella direttiva strutturale * ngIf.

selectedHero.name non esiste ancora perché l’utente deve ancora selezionare un eroe in modo che ritorni indefinito.

 

{{selectedHero.name}} details!

{{selectedHero.id}}

La direttiva * ngIf rimane selezionata fino al di fuori del DOM finché non viene selezionata e diventa quindi veritiera.

Questo documento mi ha aiutato a capire le direttive strutturali.

Stavi ottenendo questo errore perché hai seguito le istruzioni scritte in modo insufficiente nel tutorial di Heroes. Mi sono imbattuto nella stessa cosa.

In particolare, sotto l’intestazione Visualizza i nomi degli eroi in un modello , afferma:

Per visualizzare i nomi degli eroi in una lista non ordinata, inserisci il seguente blocco di HTML sotto il titolo e sopra i dettagli dell’eroe.

seguito da questo blocco di codice:

 

My Heroes

Non ti consiglia di sostituire il precedente codice di dettaglio, e dovrebbe. Questo è il motivo per cui siamo rimasti con:

 

{{hero.name}} details!

al di fuori del nostro *ngFor .

Tuttavia, se scorri più in basso nella pagina, troverai quanto segue:

Il modello per la visualizzazione degli eroi dovrebbe assomigliare a questo:

 

My Heroes

  • {{hero.id}} {{hero.name}}

Notare l’assenza degli elementi di dettaglio dagli sforzi precedenti.

Un errore come questo da parte dell’autore può risultare in una caccia all’oca piuttosto selvaggia. Spero che questo post aiuti gli altri a evitarlo.

Questa linea

 

{{hero.name}} details!

è al di fuori di *ngFor e non c’è nessun hero quindi hero.name fallisce.

Questo evita questo, potresti anche inizializzare il membroHero selezionato del tuo componente su un object vuoto (invece di lasciarlo indefinito).

Nel tuo codice di esempio, questo darebbe qualcosa di simile a questo:

 export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; selectedHero:Hero = new Hero(); onSelect(hero: Hero):void{ this.selectedHero = hero; } }