pasar - ngmodel angular 5

Angular2: no se puede leer la propiedad ''nombre'' de indefinido

Question

Estoy empezando a aprender Angular2. He estado siguiendo el Tutorial de héroes proporcionado en angular.io. Todo funcionaba bien hasta que, molesto por el desorden de HTML que usaba la plantilla, usé la URL de la plantilla en su lugar y moví el HTML a un archivo llamado hero.html. El error que se genera es, "No se puede leer la propiedad ''nombre'' de indefinido". Curiosamente, se puede acceder a la variable héroes que apunta a una matriz de objetos para que ngFor produzca la cantidad correcta de etiquetas "li" de acuerdo con el número de objetos en la matriz. Sin embargo, no se puede acceder a los datos de los objetos de la matriz. Además, incluso una variable simple que contenga algo de texto, no se mostrará usando {{}} paréntesis en el HTML (vea el código provisto).

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

<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
<h2>{{hero.name}} details!</h2>
<div>
    <label>id: </label>{{hero.id}}
</div>
<div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name">
<div>

Aquí hay una foto:

Answer 1

Esta línea

<h2>{{hero.name}} details!</h2>

está fuera *ngFor y no hay hero por hero.name tanto, hero.name falla.

Answer 2

Esto funcionó para mí:

export class Hero{
   id: number;
   name: string;

   public Hero(i: number, n: string){
     this.id = 0;
     this.name = '''';
   }
 }

y asegúrese de inicializar también bien seleccionado

selectedHero: Hero = new Hero();

Answer 3

La variable selectedHero es nula en la plantilla, por lo que no puede enlazar selectedHero.name como está. Necesita usar el operador de elvis para este caso:

<input [ngModel]="selectedHero?.name" (ngModelChange)="selectedHero.name = $event" />

La separación de [(ngModel)] en [ngModel] y (ngModelChange) también es necesaria porque no se puede asignar a una expresión que use el operador elvis.

También creo que te refieres a usar:

<h2>{{selectedHero?.name}} details!</h2>

en lugar de:

<h2>{{hero.name}} details!</h2>

Answer 4

Para evitar esto, también puede inicializar el miembro Hero selectedHero de su componente en un objeto vacío (en lugar de dejarlo sin definir).

En su código de ejemplo, eso daría algo como esto:

export class AppComponent {
  title = ''Tour of Heroes'';
  heroes = HEROES;
  selectedHero:Hero = new Hero();

  onSelect(hero: Hero):void{
      this.selectedHero = hero;
  }
}

Answer 5

Recibiste este error porque seguiste las instrucciones mal escritas en el tutorial de Héroes. Me encontré con lo mismo.

Específicamente, bajo el título Mostrar nombres de héroes en una plantilla , indica:

Para mostrar los nombres de los héroes en una lista desordenada, inserte el siguiente fragmento de HTML debajo del título y sobre los detalles del héroe.

seguido de este bloque de código:

<h2>My Heroes</h2>
<ul class="heroes">
  <li>
    <!-- each hero goes here -->
  </li>
</ul>

No le indica que reemplace el código de detalle anterior, y debería hacerlo. Es por eso que nos quedamos con:

<h2>{{hero.name}} details!</h2>

fuera de nuestro *ngFor .

Sin embargo, si se desplaza más abajo en la página, encontrará lo siguiente:

La plantilla para mostrar héroes debería verse así:

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

Tenga en cuenta la ausencia de elementos detallados de esfuerzos anteriores.

Un error como este por parte del autor puede dar como resultado una caza de gansos bastante salvaje. Con suerte, esta publicación ayuda a otros a evitar eso.

Answer 6

Solo necesitaba leer un poco más y se le habría presentado la directiva estructural * ngIf.

selectedHero.name aún no existe porque el usuario aún no ha seleccionado un héroe, por lo que regresa indefinido.

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
  <div><label>id: </label>{{selectedHero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
  </div>
</div>

La directiva * ngIf mantiene a SelectedHero fuera del DOM hasta que se selecciona y, por lo tanto, se vuelve verdadero.

Este documento me ayudó a comprender las directivas estructurales.