Question

我在Angular 5中有一个显示项目列表的组件。通过调用服务并订阅它来填充项目。该服务需要首先发出请求以获取项目列表，该列表返回“事件”列表。 myItems的新列表是根据此响应构建的。然后，对于每个项目，将发出新请求以获取项目的描述，并使用结果更新项目。数据似乎是正确构建的，似乎调用了订阅回调，但我的组件模板没有显示任何内容。我相信我在服务中做错了（也许用flatMap）。

组件：

ngOnInit() {
    this.itemsService.getItems()
        .subscribe((items: Item[]) => {
            // console.log(items) here seems fine, but the template does not display anything
            this.items = items;
        });
}

组件模板：

<ul *ngFor="let item of items">
    <li>{{item.description}}</li>
 </ul>

服务：

public getItems(): Observable<Item[]> {
    let myItems = [];

    return this.httpService.get('items')
        .map((response: any) => {
            if (response.events) {
                let eventObj: Item;
                for (let i = 0; i < response.events.length; i++) {
                    if (response.events[i]) {
                        eventObj = new Item(response.events[i]);
                        myItems.push(eventObj);
                    }
                }
            }
            return myItems;
        })
        .flatMap((items: Item[]) => {
            const itemsObservables = items
                .map((item: Item) => {
                    return this.itemService.getDescription(item.id)
                        .map((response) => {
                            item.description = response;
                            return item;
                        });
                });
            return Observable.forkJoin(itemsObservables)
                .map(data => {
                    return myItems;
                });
        });
}

Answer 1

如果没有必要，请避免跟踪可观察状态。假设您有合理的理由这样做，我相信您可以通过更改最后一条声明来使用扩展运算符来解决您的问题：

return Observable.forkJoin(...itemsObservables);

Answer 2

由于在这些类型的异步操作中需要延迟，您的模板可能会崩溃。请更改模板中用于访问/显示此数据的所有节点的语法：

<li>{{item?.description}}</li>

事实上，在您使用它之前，请将问号添加到模板中的所有访问者。一旦你开始工作，你可以根据需要将它们拉回来。

即。 <li>{{item?.entity?.name?.firstname}}</li>

希望这有帮助

订阅服务为列表中的每个项目发出多个并行请求

2 个答案: