时间戳

首页 > 解决方案 > 等待加载 html 直到从异步进程加载引用的 js 值？

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

问题描述

我正在通过以下过程在 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">

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

标签： javascriptangularfirebasealgoliainstantsearch

解决方案

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

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

推荐阅读