未定義のangle2のプロパティ '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 

インターネットを掃除することから、私の問題はバージョンオブジェクトがヌルであることがわかります。私のような何かを行う場合は、次の

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

を私は

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

ような何かをした場合、私はMyComponentのを編集し、

を設定した場合、私は何も

を見ていない、正しいバージョン

を見ることができます

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を使用する必要があります。

コンポーネント間およびアプリケーション内でのデータ共有のプロセスは、サービスを作成し、モジュールで提供されるように追加することです。そして、そのシングルトンオブジェクトは永遠に利用可能になります。

//module 
import {NgModule}  from '@angular/core'; 
import {YourService} from "./services/your-service"; 


@NgModule({ 
    imports: [ 
    BrowserModule 
    ], 
    declarations: [ 
    AppComponent 
    ], 
    providers: [ 
    YouService 
    ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { 

} 



//this is your component 
import {Component} from '@angular/core'; 
import {YourService} from "../../services/your-service"; 


@Component({ 
    selector: 'component-app', 
    templateUrl: '../../views/app.component.html', 
}) 
export class HeaderComponent { 

    constructor(public yourService: YourService) { 
    } 

} 


//your service 

import {Injectable} from "@angular/core"; 

@Injectable() 
export class YourService { 

    private _message: string = 'initial message'; 
    private _style: string = 'success'; 


    get message(): string { 
    return this._message; 
    } 

    set message(value: string) { 
    this._message += value; 
    } 

    get style(): string { 
    return this._style; 
    } 

    set style(value: string) { 
    this._style = value; 
    } 
} 


//finally your view 
<div class="row"> 
    <div [class]=""><h1>{{swapService.message}}</h1></div> 
</div>