Eu estou começando a aprender Angular2. Eu tenho seguido o Tutorial Heroes fornecido em angular.io. Tudo estava funcionando bem até que, incomodado com a confusão de HTML usando o modelo, usei o URL do modelo em seu lugar e movi o HTML para um arquivo chamado hero.html. O erro gerado é “Não é possível ler a propriedade ‘name’ de undefined”. Estranhamente, a variável heroes que aponta para um array de objects pode ser acessada de modo que ngFor produza a quantidade correta de tags “li” de acordo com o número de objects no array. No entanto, os dados dos objects da matriz não podem ser acessados. Além disso, mesmo uma variável simples contendo algum texto, não será exibida usando colchetes {{}} no HTML (veja o código fornecido).
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}}
Aqui está uma foto:
- Chamadas da API HTTP do CORS e do Google Maps
- Nunca promises resolvidas causam memory leaks?
- Importando lodash para o aplicativo typescript angular2 +
- Angular – Use canos em serviços e componentes
- angular2 acionando manualmente o evento de clique em determinado elemento
A variável selectedHero é nula no template, então você não pode vincular o selectedHero.name como está. Você precisa usar o operador Elvis para este caso:
A separação do [(ngModel)] em [ngModel] e (ngModelChange) também é necessária porque você não pode atribuir a uma expressão que usa o operador elvis.
Eu também acho que você pretende usar:
{{selectedHero?.name}} details!
ao invés de:
{{hero.name}} details!
Você só precisava ler um pouco mais e teria sido apresentado à diretiva estrutural.
selectedHero.name ainda não existe porque o usuário ainda não selecionou um herói para que ele retorne indefinido.
{{selectedHero.name}} details!
{{selectedHero.id}}
A diretiva * ngIf mantém selecionado o Hero fora do DOM até que ele seja selecionado e, portanto, se torna vital.
Este documento me ajudou a entender as diretrizes estruturais.
Você estava recebendo este erro porque seguiu as instruções mal escritas no tutorial Heroes. Eu corri para a mesma coisa.
Especificamente, sob o título Exibir nomes de heróis em um modelo , ele afirma:
Para exibir os nomes dos heróis em uma lista não ordenada, insira o seguinte fragment de HTML abaixo do título e acima dos detalhes do herói.
seguido por este bloco de código:
My Heroes
-
Ele não instrui você a replace o código de detalhe anterior, e deveria. É por isso que ficamos com:
{{hero.name}} details!
fora do nosso *ngFor
.
No entanto, se você rolar mais abaixo na página, você encontrará o seguinte:
O modelo para exibir os heróis deve ficar assim:
My Heroes
- {{hero.id}} {{hero.name}}
Observe a ausência dos elementos de detalhe de esforços anteriores.
Um erro como este pelo autor pode resultar em uma perseguição bastante selvagem. Espero que este post ajude os outros a evitar isso.
Está linha
{{hero.name}} details!
está fora *ngFor
e não há hero
portanto hero.name
falha.
Isso evita isso, você também pode inicializar o membro selectedHero do seu componente para um object vazio (em vez de deixá-lo indefinido).
Em seu código de exemplo, isso daria algo assim:
export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; selectedHero:Hero = new Hero(); onSelect(hero: Hero):void{ this.selectedHero = hero; } }
- Como usar o jQuery com o Angular?
- Qual é a diferença entre o modo de produção e desenvolvimento em Angular2?
- Não é possível ligar a ‘ng-forOf’, uma vez que não é uma propriedade nativa conhecida
- Como criar dinamicamente modais de bootstrap como componentes Angular2?
- Tutorial Angular2 (Tour of Heroes): Não é possível encontrar o módulo ‘angular2-in-memory-web-api’
- Angular 2 classificar e filtrar
- Observables quentes e frios: há operadores ‘quentes’ e ‘frios’?
- Como repetir um pedaço de HTML várias vezes sem ngFor e sem outro @Component
Intereting Posts
- Angular 2 ng2-bootstrap modal dentro do componente filho chamado do componente pai
- dependency injection circular angular 2
- Como passar uma expressão para um componente como uma input em Angular2?
- Como faço para realmente implantar um aplicativo system_1 do Angular 2 + Typescript +?
- Angular 2 – NgPara usar números em vez de collections
- Usando Pipes dentro de ngModel em elementos INPUT em Angular
- O que é o ngDefaultControl em Angular?
- Como estilizar componentes filhos do arquivo css do componente pai?
- Como faço para baixar um arquivo com Angular2
- Angular 2 – Visualização sem atualização após alterações no modelo
- Como atualizar um componente sem atualizar a página inteira – Angular