angular2 : 오류 : TypeError : 정의되지 않은 '...'속성을 읽을 수 없습니다.

Question

내 angular2 코드 조각의 플 런커를 첨부했습니다. 내 JSON에서 필드를 인쇄하고 싶지만 처음에는 Object가 null이고 약속을 통해 채워지는 것처럼 인쇄 할 수 없습니다.

이 내 구성 요소 파일 내가 잘 실행되고 내 템플릿에서 선 {{abc.xyz.name}}을 제거하고

import {Component, NgModule, OnInit} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

class MyData { 
    xyz : MySubData; 
} 

class MySubData { 
    name : string; 
} 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 

     {{abc.xyz.name}} 
    </div> 
    `, 
}) 
export class App implements OnInit { 
    abc : MyData = null; 
    constructor() { 
    this.name = 'Angular2' 
    } 

    ngOnInit() { 
    setTimeout(() => { 
     this.abc = new MyData(); 
     this.abc.xyz = new MySubData(); 
     this.abc.xyz.name = "Binita"; 
    }, 2000); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

입니다.

Promise (즉, 비동기 호출)에서 데이터를 가져 오기 때문에 내 코드에서 시간 제한을 사용하고 있습니다.

처음에는 abc이 null으로 이해할 수 있습니다. 내 코드는 abc.xyz.name을 찾을 수 없습니다. 하지만 검사 할 조건을 넣고 싶지는 않습니다. JSON 내부에 여러 속성이 있고 조건에 따라 각 속성을 쓸 수 없습니다.

이전에 angularjs 1에서 abc가 null이면 자동으로 공백 문자열로 바뀝니다. 나는 angular2에서 같은 일을하고 싶다. 제발 제안 해주세요.

다음은 abc 템플릿 렌더링의 순간에 정의되지 않기 때문에 년대 plunker

https://plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview

Answer 1

입니다. HTTP 호출이 완료 될 때까지 당신은 템플릿 "보호"를 위해 안전한 항해 연산자 (?)를 사용할 수 있습니다 :

{{abc?.xyz?.name}} 

당신은 안전한 항해 운영자 here에 대한 자세한 내용을보실 수 있습니다.

업데이트 :

안전 탐색 연산자는 배열에서 사용할 수 없습니다, 당신은이 문제를 극복하기 위해 NgIf 지침을 활용해야합니다 :

<div *ngIf="arr && arr.length > 0"> 
    {{arr[0].name}} 
</div> 

보다 약 NgIf 지시 here을 읽어보십시오.

Answer 2

안전한 탐색 연산자 또는 Existential Operator 또는 Null Propagation Operator는 Angular Template에서 지원됩니다.

<div>test-1: {{ myObj?.doSomething()}}</div> 
<div>test-2: {{ myArray[0].doSomething()}}</div> 
<div>test-3: {{ myArray[2]?.doSomething()}}</div>