Fail beobachtbare Wert

Question

abrufen Ich habe aa Funktion, die eine Observable<Person[]> zurück, Person ist mein Modell:

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

Jetzt in meinem component.ts im, diese Funktion aufrufen, und ich möchte, dass Array abzurufen, damit ich zeigen kann es in der html.

das Array, das Beispiel zurückkommt:

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

Ich habe 2 Tasten, die die gleiche Funktion aufrufen.

Ich habe drei Methoden in meinem component.ts, die ausgelöst, wenn diese Schaltflächen geklickt wurden, und das ist, wo ich eine Variable festlegen möchte, um den zurückgegebenen Wert dieses Observable zu halten. I'v versucht, etwas zu tun, aber es hat nicht funktioniert ...

dies sind die Funktionen:

@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; diese Linie nicht kompiliert, sein, weil im Person[] zu listOneData: Observable<Person[]>; zuweisen, aber auch wenn ich nehmen der Observable <> es Dosent Arbeit.

Kann mir bitte jemand erklären, was eine effiziente Methode ist? Ich möchte es async nicht tun, weil ich ein Array zum HTML schicken möchte, und auf dem Code basiert, wo ich mich abmelden sollte?

danke allot!

Answer 1

Klingt, als ob Sie zwei verschiedene Dinge wollen; Dann

@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; 
    }) 
    } 
} 

, egal wo Sie sich abmelden wollen, sind: Daten aus dem beobachtbaren und einem Bezugsobjekt, so können Sie sich abmelden

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

Sie auch erwähnt Sie nicht tun wollen, um es Asynchron; das macht keinen Sinn in JavaScript, da diese asynchron ist; Fragen Sie sich selbst, was möchten Sie dem Benutzer zeigen, während der Inhalt geladen wird? Sie möchten wahrscheinlich eine Art Fortschrittsanzeige anzeigen, sodass diese in Ihre Ansicht integriert werden sollte.