정의되지 않은 각도 4의 속성 'name'을 읽을 수 없습니다.

Question

구성 요소의 템플릿에 값을 인쇄하려고합니다.

는하지만 난이 질문에 대한 코드의 추가 내용을 제거한 위의 오류 Cannot read property 'name' of undefined

을 얻고있다. 세부 정보의 첫 번째 행에 액세스하려고합니다.

구성하여 오류 메시지에서

import { 
    Component 
} from '@angular/core'; 
import { 
    Person 
} from './person'; 
import { 
    getPersonDetailsService 
} from './person.service'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     {{data[0].name}} 
     ` 
}) 
export class AppComponent { 
    data: Person[] = []; 
    ngOnInit(): void { 
    this.getPersonDetailsService.getData() 
     .then(data => this.data = data.slice(1, 5)); 
    } 

} 

Answer 1

브라우저에서 인쇄 할 때 데이터가 정의되어 있는지 먼저 확인해야합니다.

{{data[0]?.name}} 

데이터가 처음에 정의되지 않았으므로이 데이터의 name 속성에 액세스 할 수 없습니다.

각도 안전 탐색 연산자 (?).

Documentation

속성 경로의 널 (null) 값과 정의는 쉴드선 유창한 편리한 방법이다. 여기 은 currentHero가 인 경우 뷰 렌더링 실패를 방지합니다.

변수가 대신 ngOnInit의 생성자이 점을 넣어보십시오 && 조건

{{data[0] && data[0].name}}

Answer 2

파일은 data이 정의되지처럼 보인다 (또는 비어) - 에러가

{{data[0].name}} 

어쩌면 넣어 말한다 라인에 무슨 일이 일어나고 a console.log(data) 그 전에 무엇이 진행되고 있는지 확인하십시오.

Answer 3

를 사용하여 null의 경우, 또는하지 않을 경우 당신은 또한 확인할 수 있습니다

getPersonDetailsService.getData() ... 

는 또한, 당신이 필요로하는 '데이터'길이가 0보다 큰 경우 템플릿 내부에서 확인하십시오. {{data[0]?.name}}

Answer 4

"데이터"값은 getData() 서비스에서 응답을 확인한 후에 업데이트됩니다. 나는 당신이 서비스를 치고 데이터를 얻고 있다고 가정하고있다. 그럼에도 불구하고 서비스가 응답을 반환하면 약속은 해결 될 것입니다. 한편, 뷰는 템플릿을 렌더링하려고 시도하고 표현식 데이터 [0]을 평가할 때 데이터가 서비스에서 아직 도착하지 않았으므로 0에서 아무 요소도 찾지 않습니다. 따라서 0 번째 인덱스에서 요소가 정의되지 않았으므로 오류가 발생합니다.

여기 관측 가능을 사용해야합니다.