정의되지 않은 angular2의 속성 'version'을 읽을 수 없습니다

Question

html 구성에서 비동기 개체를 사용하는 데 어려움을 겪고 있습니다. 다음과 같이

export class Version { 

    isGood: boolean; 

    constructor(isGood: boolean) { 
     this.isGood= isGood; 
    } 
} 

이 모델은 구성 요소에 의해 호출됩니다 : 버전 변수에

@Injectable() 
export class MyComponent { 

    public version: Version; 

    constructor(private _myService: VersionService) {} 

    getVersion(): void { 
     // async service that gets the versions 
     this._myService.getVersion().subscribe(
      data => this.version= data, 
      error=> console.log(error), 
      () => console.log("getting all items complete") 
     ); 
    } 
} 

내 템플릿의 참조를 다음과 같이 여기

내 모델입니다

<button (click)="getVersion()">Get Version</button> 
<hr> 
<p style="color:red">{{error}}</p> 
<h1>Version</h1> 

<p>{{version.isGood}}</p> 

그러나 예외가 발생합니다.

Cannot read property 'isGood' of undefined 

인터넷을 청소하는 것으로부터 버전 객체가 null이기 때문에 내 문제가있는 것으로 봅니다. 내가 좋아하는 뭔가를 할 경우

<p>{{version | json}}</p> 

를 나는 내가 아무것도

나는를 MyComponent 편집하는 경우를 볼

<p>{{version.isGood | async}}</p> 

과 같이 할 경우 올바른 버전

을보고,

을 설정할 수 있습니다

public version: Version = new Version(); 

.isGood 속성 가져 오기를 실행할 수는 있지만 항상 비어 있습니다.

비동기 방식으로 사용하는 경우 다른 방법으로 속성을로드해야합니까?

Answer 1

? 연산자를 사용하거나 *ngIf을 사용하십시오.

<p>{{version?.isGood}}</p> 

<p *ngIf="version">{{version.isGood}}</p> 

Answer 2

관찰 가능한 데이터 서비스. 템플릿에서

@Injectable() 
export class MyComponent { 

    public version = new ReplaySubject<Version>(); 

    constructor(private _myService: VersionService) {} 

    init(): void { 
     // async service that gets the versions 
     this._myService.getVersion().subscribe(
      data => this.version.next(data), 
      error=> console.log(error), 
      () => console.log("getting all items complete") 
     ); 
    } 

    getVersion(): void { 
      this.version.asObservable(); 
    } 
} 

<button (click)="init()">Get Version</button> 
<hr> 
<p style="color:red">{{error}}</p> 
<h1>Version</h1> 

<p>{{(version |async)?.isGood}}</p> 

Answer 3

이 시도 : 당신이 버튼을 클릭을 통해 버전의 데이터를 가져올 때까지이 version.isGood이 정의는 null을 방지하기 위해 각도 알려줍니다

<p>{{version?.isGood}}</p> 

너의 봉사.

Answer 4

처음으로 수정하겠습니다. @Injectable()은 일반적인 typescript 클래스를 데이터를 공유 할 수있는 주사 가능한 서비스로 만듭니다.

구성 요소를 만들려면 @Component decoratore를 사용해야합니다.

응용 프로그램 내에서 구성 요소 간의 데이터 공유 프로세스는 모듈에서 제공하는대로 서비스를 만들고 추가하는 것입니다. 그리고 그 싱글 톤 객체는 영원히 사용할 수 있습니다.