ngIf aktualisiert meine Vorlage nicht

Ich habe die folgende Komponente in Angular2, die ein Array als Eingabe empfängt und einen Dienst aufruft, um für jeden Eintrag im Array den Breiten- und Längengrad jedes Eintrags durch Aufrufen von a zu erhalten ServicengIf aktualisiert meine Vorlage nicht

export class MyComponent implements OnInit { 

    @Input() players: Player[] = []; 
    locations: LatAndLon[] = []; 
    isBusy: boolean = true; 


    constructor(
     private myService: MyService, 
    ) {} 

    ngOnInit(): void { 
     for (let player of this.players) { 
      this.myService.getLatAndLon(player.address).then(latAndLon => { 
       this.locations.push(latAndLon); 
       this.finishLoading(); 
      }); 
     } 

    } 

    finishLoading(): void { 
     this.isBusy = this.players.length != this.locations.length; 
    } 
    ... 
}

Also, in der ngOnInit Methode (die ein Versprechen zurückgibt) versuche ich alle Daten von meinem Dienst zu bekommen. Dann möchte ich es in meiner Vorlage zeigen, aber ich muss warten, bis ich alle Serviceanrufe "aufgelöst" habe.

Dafür habe ich eine Variable isBusy erstellt, die überprüft, ob alle Daten verfügbar sind oder nicht. Ich versuche, jedes Mal, wenn ich an den Service rufe, isBusy zu aktualisieren (vielleicht haben Sie einen anderen und besseren Ansatz, wenn ja, lassen Sie es mich bitte wissen).

Dann habe ich die folgende Vorlage:

<div *ngIf="!isBusy"> 
....

aber wird nichts gezeigt, trotz der Tatsache, dass, wenn ich die Werte der Stellen Array drucken, kann ich sehen, dass alles in Ordnung ist, keine Ahnung?

Quelle

2016-10-28 Manuelarte

Wenn eine der Anforderungen fehlschlägt, wird nie etwas angezeigt. Vielleicht passiert das? Wenn Sie "isBusy" ausgeben, wird dies so eingestellt, wie Sie es erwarten? –

Hallo, ich habe es überprüft und alle Anfragen sind gut, und isBusy wird am Ende auf falsch gesetzt. – Manuelarte

Bitte schreiben Sie ein vollständiges minimales Beispiel in einer Plunkr, das das Problem reproduziert. Beachten Sie, dass der Code wahrscheinlich nicht das tut, was Sie möchten, da es keine Garantie dafür gibt, dass die Versprechen in der richtigen Reihenfolge gelöst werden. Sie sollten Promise.all() verwenden oder das LatLon im Player selbst streunen. –

Es kann einfacher sein, wenn Sie Ihre Eingabe-Array in einen beobachtbaren Strom umwandeln:

ngOnInit() { 
    let source = Observable.from(this.players) 
    .concatMap(x => Observable.fromPromise(this.myService.getLatAndLon(x))); 

    let subscription = source.subscribe(
    x => this.locations.push(x), 
    error => console.log('Error ', error), 
    () => this.isBusy = false 
); 
}

Hinweis: Verwenden Sie concatMap wenn Sie Ihren Standort Array müssen die Reihenfolge der Eingabe-Array zu erhalten. Wenn dies nicht benötigt wird, können Sie flatMap verwenden.

Hier Dokumentation über Überbrückung Observable und Versprechungen:

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/promises.md

Ich hoffe, das hilft.

Quelle

2016-10-29 01:24:53

ngIf aktualisiert meine Vorlage nicht

Antwort

Verwandte Themen