等待加载 html 直到引用的 js 值从异步进程加载？

Question

我正在通过以下过程在我的 Firestore 数据库中加载文档字段的值：

let currentUser = firebase.auth().currentUser;
this.afs.collection("people").doc(currentUser.uid).get().subscribe( opportunities => {
 this.items = opportunities.get("following");
});

然后我使用 this.items 过滤我 html 中加载的即时搜索数据。我通过在 js 代码中定义以下配置来做到这一点（请注意，我引用 this.items 作为过滤器。

   this.config = {
        ...environment.algolia,
        indexName: 'test',
        searchParameters: {
            disjunctiveFacetsRefinements: {
            poster: this.items
        }
        },
        routing: {
          router: historyRouter(),
          stateMapping: {
            stateToRoute({query, page}) {
              return {
                query: query,
                page: page
              };
            },
            routeToState({query, page}) {
              return {
                query: query,
                page: page
              };
            }
          }
        }
    }

然后在我的 html 中，我这样引用这个配置对象：

<ais-instantsearch [config]="config">

但问题是 html 在我定义 this.items 的过程成功完成之前加载了这个配置文件。我知道这是因为它是从我的数据库中提取的异步进程，但我不知道如何解决它。我尝试将 this.config 的声明添加到代码的 opportunities => {} 部分，以便它在我获得 this.items 值之后发生；然而，html 仍然加载，然后失败，因为尚未定义配置。解决这个问题的好方法是什么？

Answer 1

我建议使用异步管道解析配置。

<ais-instantsearch [config]="config | async">

这将需要使 this.config 成为可观察对象，我推荐 BehaviorSubject：http://reactivex.io/RxJava/javadoc/rx/subjects/BehaviorSubject.html

private readonly config: BehaviorSubject<any> = new BehaviorSubject(undefined);

# ...

ngOnInit() {
    let currentUser = firebase.auth().currentUser;
    this.afs.collection("people").doc(currentUser.uid).get()
        .subscribe(opportunities => {
            let items = opportunities.get("following");
            let config = {
                ...environment.algolia,
                indexName: 'test',
                searchParameters: {
                    disjunctiveFacetsRefinements: {
                        poster: items
                    }
                },
                routing: {
                    router: historyRouter(),
                    stateMapping: {
                        stateToRoute({ query, page }) {
                            return {
                                query: query,
                                page: page
                            };
                        },
                        routeToState({ query, page }) {
                            return {
                                query: query,
                                page: page
                            };
                        }
                    }
                }
            };
            this.config.next(config);
        });
}

等待加载 html 直到引用的 js 值从异步进程加载？

Wait to load html until a referenced js value loads from an async process?

javascript

angular

firebase

algolia

instantsearch