失敗私は<code>Observable<Person[]></code>を返すAA機能を持って観察可能な値

Question

を取得するために、人は私のモデルである：私のcomponent.tsで今

export interface Person { 
    id: string; 
    age: number; 
} 

この関数を呼び出すと、私は私が表示できるように、その配列を取得したいイムそれはhtmlにあります。

例を戻ってくる配列：

[{"id":"13434 1","age":21},{"id":"34334 1","age":27}] 

私は同じ関数を呼び出す2つのボタンがあります。

私は、そのボタンがクリックされたときにトリガされるcomponent.tsに3つのメソッドがあります。これは、Observableの戻り値を保持する変数を設定する場所です。 I'vは、何かをしようとしたが、それはdidntの仕事...

これは関数です：

@Injectable() 
export class MyCmp implements OnInit { 

    listOneData: Observable<Person[]>; 
    listTwoData: Observable<Animal[]>; 

    showListOne = false; 
    showListTwo = false; 

    constructor(private _myService: MyService) { 
    }; 

    public showListOneData(): void { 
    this.showListOne = true; 
    this.showListTwo = false; 
    this._myService.getListOneData().subscribe(res => { 
     this.listOneData = res; 
    }) 
    } 

    public showListTwo(): void { 
    this.showListTwo = true; 
    this.showListOne = false; 
    this._myService.getListTwoData().subscribe(res => { 
     this.listTwoData = res; 
    }) 
    } 
} 

this.listTwoData = res;この行は、コンパイルのイムはlistOneData: Observable<Person[]>;にPerson[]を割り当てるので、私はとってもていませんObservable of <>それは仕事量です。

誰かがそれを行う有効な方法であることを私に説明してもらえますか？私はhtmlに配列を送信し、コードをベースにして非購読をしなければならない非同期の原因を取りたくないのですか？

ありがとう！

Answer 1

あなたは2つの異なるものがほしいと思うように聞こえます。観測可能とサブスクリプションオブジェクトからのデータ登録を解除することができますので：次に

@Injectable() 
export class MyCmp implements OnInit { 

    listOneData: Person[]; 
    listTwoData: Animal[]; 

    listOneSubscription: Subscription;  
    listTwoSubscription: Subscription; 

    showListOne = false; 
    showListTwo = false; 

    constructor(private _myService: MyService) { 
    }; 

    public showListOneData(): void { 
    this.listOneSubscription = this._myService.getListOneData().subscribe(res => { 
     this.showListOne = true; 
     this.showListTwo = false; 
     this.listOneData = res; 
    }) 
    } 

    public showListTwo(): void { 
    this.listTwoSubscription = this._myService.getListTwoData().subscribe(res => { 
     this.showListTwo = true; 
     this.showListOne = false; 
     this.listTwoData = res; 
    }) 
    } 
} 

、あなたが退会を希望しているところはどこでも：

this.listOneSubscription && this.listOneSubscription.unsubscribe(); 
this.listTwoSubscription && this.listTwoSubscription.unsubscribe(); 

また、あなたはそれが非同期行うにはしたくない述べました。これはが非同期なのでJavaScriptでは意味をなさない。コンテンツの読み込み中にユーザーに何を表示したいのですか？いくつかの種類の進捗インジケータを表示したいと思うかもしれません。そのため、ビューに組み込む必要があります。