Holen Sie string-Wert aus Beobachtbaren<string> in Maschinenschrift und Eckig

Möchte ich, um string-Wert aus Beobachtbaren und Wert aus der Funktion an den Aufrufer der Funktion.

ZB:
Ich habe die array-Schlüssel und würde gerne Hole den Wert (string), alle Schlüssel nacheinander und Anzeige von html-Komponenten die Menüleiste.

Hier sind die ts-Dateien:

- Schlüssel-Liste.Komponente.ts

public data = [ { 'key': 1, 'value' : this.getValue(1)}, 
                { 'key': 2, 'value' : this.getValue(2)}, 
                ...
              ];

private getValue(key: number): string {
    return this.keyService.find(key).subscribe(response => {
         return response;
    });
}

keyService.ts

...
public find(key:number): Observable<any> {
  return this.http.get(`/api/keys/${key}`).map(res => res.json() || {});
}
...

Möchte ich zur Anzeige aller Werte in der html-Komponente.
Aber immer Fehler in der Schlüssel-Liste.Komponente.ts, die beobachtbare in Typ string.

Wie kann ich lösen dieses Abonnement methodolgy und stellen Sie sicher, dass getValue sollte immer eine Zeichenkette zurückgeben, und machen es einwandfrei.

Einer der Lösung ist:

private getValue(key: number): string {
        let result: string;
        this.keyService.find(key).subscribe(res => result = res);
        return result;
    }

Die oben genannte Lösung funktioniert nicht immer.
Was sind die alternativen Lösung für diese Art von problem?

die Art und Weise Sie erklären data ist falsch. Das ist nicht, wie die Verwendung von asynchronen Funktionen.

InformationsquelleAutor virsha | 2017-08-12

  1. 6

    Sie versuchen, zurück Observable aus-Funktion getValue, und return response oder return result wird nicht funktionieren, weil die Anfrage für http.get ist asynchrone.

    Hier sind einige Optionen, was Sie tun können:

    Option1: mit Async Rohr auf Ihre Vorlage zu abonnieren Ergebnis http.get und entfernen Sie abonnieren Teil aus der Funktion getValue.

    <div *ngFor="let item of data">
  <span>{{item.value | async}}</span>
</div>

//return Observable and subscribe by async pipe at template
private getValue(key: number): string {
  return this.keyService.find(key);
}

    Option2: Definieren Sie die array - data ohne value Feld und aktualisieren Ihren Wert Feld später. Aber seien Sie vorsichtig, dass die value Feld undefined es sei denn, Sie bekommen Antwort vom this.keyService.find(key).

    public data = [
  { 'key': 1}, 
  { 'key': 2}, 
  ...
];

constructor() {
  this.data.forEach(item => {
    this.keyService.find(item.key).subscribe(response => {
      item.value = response;    //update value field here.
    });
  });
}

//here getValue function is no longer necessary.

    Hoffe, das wird helfen.

    UPDATE von OP

    Mit einigen geringfügigen änderungen in den oben genannten option1 klappte es dann.

    Hier sind die änderungen:

    <div *ngFor="let item of data">
  <span>{{ getValue(item.key) | async}}</span>
</div>

public getValue(key: number): any {
  return this.keyService.find(key);
}

    Danke für die Erinnerung nutzen Async Rohr @Pengyy (Aus OP)

    InformationsquelleAutor Pengyy

Schreibe einen Kommentar