Дождаться загрузки 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 для фильтрации моих данных по InstantSearch, загруженных в мой 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 в мою часть кода возможностей => {}, чтобы это произошло после того, как я получу значение this.items; Тем не менее, HTML все еще загружается, а затем он терпит неудачу, потому что config еще не был определен. Какой хороший подход для решения этой проблемы?

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