Angular2: 정의되지 않은 속성 'name'을(를) 읽을 수 없습니다.

Angular2: 정의되지 않은 속성 'name'을(를) 읽을 수 없습니다.

저는 Angular2를 배우기 시작했습니다.저는 angular.io 에서 제공하는 Heroes Tutorial을 따라왔습니다.템플릿을 사용하는 HTML의 어수선함에 짜증이 나서 템플릿 URL을 대신 사용하여 hero.html이라는 파일로 HTML을 이동하기 전까지는 모든 것이 잘 작동했습니다.생성되는 오류는 "정의되지 않은 속성 'name'을 읽을 수 없습니다."입니다.이상하게도, ngFor가 배열의 개체 수에 따라 정확한 양의 "li" 태그를 생성하도록 객체 배열을 가리키는 heroes 변수에 액세스할 수 있습니다.그러나 어레이의 개체 데이터에 액세스할 수 없습니다.또한 일부 텍스트를 포함하는 단순 변수도 HTML의 {{}}괄호를 사용하여 표시되지 않습니다(제공된 코드 참조).

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

영웅. 영웅.

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

여기 사진이 있습니다.

변수selectedHero이라null바인딩할 수 없도록 템플릿에서selectedHero.name그대로입니다. 엘비스 오퍼레이터를 사용해야 합니다. ?.이 경우:

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

의 분리.[(ngModel)]안으로[ngModel]그리고.(ngModelChange)또한 elvis 연산자를 사용하는 식을 할당할 수 없기 때문에 필요합니다.

또한 다음을 사용해야 한다고 생각합니다.

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

다음 대신:

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

당신은 조금 더 읽기만 하면 *ngIf 구조 지침을 알게 될 것입니다.

사용자가 아직 영웅을 선택하지 않았기 때문에 selectedHero.name 이 존재하지 않으므로 정의되지 않은 상태로 반환됩니다.

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

*ngIf 지시문이 계속 선택됨선택되어 진실이 될 때까지 DOM을 종료합니다.

이 문서는 구조적 지침을 이해하는 데 도움이 되었습니다.

이를 방지하기 위해 다음을 초기화할 수 있습니다.selectedHero구성 요소의 구성원을 빈 개체로 지정합니다(정의되지 않은 상태로 유지할 필요 없음).

예제 코드에서 다음과 같은 것을 제공합니다.

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

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

Heroes 튜토리얼에서 제대로 작성되지 않은 지침을 따랐기 때문에 이 오류가 발생한 것입니다.저도 같은 일을 당했어요.

구체적으로 템플릿에 영웅 이름 표시 제목 아래에는 다음과 같은 내용이 있습니다.

순서가 지정되지 않은 목록에 영웅 이름을 표시하려면 제목 아래와 영웅 세부 정보 위에 다음 HTML 청크를 삽입합니다.

다음 코드 블록이 나옵니다.

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

이전 세부 코드를 교체하라는 지시는 없으며 교체해야 합니다.이것이 우리에게 남은 이유입니다.

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

리밖의 에서.*ngFor.

그러나 페이지를 더 아래로 스크롤하면 다음과 같은 상황이 발생합니다.

영웅을 표시하기 위한 템플릿은 다음과 같아야 합니다.

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

밖에 있습니다.*ngFor 그고없 다니습이 .herohero.name실패합니다.

이것은 저에게 효과가 있었습니다.

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

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

Hero를 선택한 후 초기화해야 합니다.

selectedHero: Hero = new Hero();

연산자 Angular가 .?.뷰 렌더 오류로부터 보호합니다.그들은 그것을 안전한 항해사라고 부릅니다.아래의 예를 들어 보겠습니다.

The current person name is {{nullObject?.name}}

이름 입니다.null전체 보기가 사라지고 브라우저 콘솔 내부의 오류를 볼 수 있습니다.▁property▁paths다와 같은 긴 속성 경로와 합니다.a?.b?.c?.d따라서 템플릿 내의 속성에 액세스해야 할 때마다 사용하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/39755336/angular2-cannot-read-property-name-of-undefined