Question

我在Angular2中有以下组件，接收数组作为输入并调用服务，通过调用服务（返回Promise），为数组中的每个条目获取每个条目的纬度和经度）

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;
    }
    ...
}

因此，在 ngOnInit 方法中，我尝试从我的服务中获取所有数据。然后，我想在我的模板中显示它，但是，我必须等到“解决”所有服务调用。

为此，我创建了一个变量isBusy，用于检查所有数据是否可用。我每次打电话给服务时都会尝试更新isBusy（也许你有不同的更好的方法，如果是的话，请告诉我。）

然后，我有以下模板：

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

但是，没有显示任何内容，尽管如果我打印位置数组的值，我可以看到一切都是正确的，任何线索？

Answer 1

将输入数组转换为可观察的流可能更容易：

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

注意：如果需要位置数组以保留输入数组的顺序，请使用concatMap。如果不需要，您可以使用flatMap。

以下是关于桥接Observables和Promises的文档：

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

我希望这会有所帮助。

ngIf不会更新我的模板

1 个答案: