0
203
VisualizaçõesProbando el Tutorial Maestro/Detalle de Angular2
Seguí paso a paso el tutorial oficial para aprender Angular2. Siempre hice exactamente lo que indica, pero no puedo obtener la lista de héroes a través de la directiva ngFor. Entonces, este es mi código:
aplicación.componente.ts
import { Component } from '@angular/core'; export class Hero { id: number; name: string; }; const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombasto' }, { id: 14, name: 'Celeritas' }, { id: 15, name: 'Magneta' }, { id: 16, name: 'RubberMan' }, { id: 17, name: 'Dynama' }, { id: 18, name: 'Dr IQ' }, { id: 19, name: 'Magma' }, { id: 20, name: 'Tornado' } ]; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; hero = HEROES; };aplicación.plantilla.ts
<h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul>resultado del navegador
Aquí está el tutorial: https://angular.io/docs/ts/latest/tutorial/toh-pt2.html ¿Y ahora? ¿Qué está mal con eso? ¡Son solo los primeros pasos! Gracias por ayudarme.
2 Respostas
Responde à pergunta0
Cuando haces "let hero of heroes", hero es la variable que se te permite y con la que iteras. Pero los héroes deben declararse en su componente. Es la matriz a la que se refiere para la iteración. Se distingue entre mayúsculas y minúsculas, por lo que la verdad es que no has declarado héroes, has declarado HÉROES.
0
Finalmente lo conseguí, el error estaba aquí:
<h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> La variable hero.name y hero.id no se declararon hasta que seleccionaste un héroe de la lista. Así que ojo con eso si sigues el tutorial oficial porque dicen que tendría que funcionar pero no es así hasta que no completas el código con la función de selección.