Наблюдаемый список не заполняется при обновлении страницы

Question

После этой темы: InvalidPipeArgument: '' для канала 'AsyncPipe'

Я пытаюсь понять, почему список наблюдаемых не заполняется / не отображается на экране при обновлении страницыс кнопкой Обновить браузера.Когда используется элемент управления формы кнопки «Обновить» и вызывается тот же код, он работает.

Это потому, что массив Observable заполняется при запуске, а не сразу?Между тем, html зацикливается на списке, пока он пуст?

Когда я печатаю в консоли ответ, я вижу, что массив содержит фактический результат (но все еще не отображается на экране):

callGetResources() {
    if (this.route.outlet === Constants.APP_USER) {
        // When refreshing the page, user is still not populated
        this.resourcesService.getUser()
        .subscribe( data => {
            this.resources = this.resourcesService.getResources(data.text());
//this.resourcesService.getResources(data.text()).subscribe( response => {
//console.log(response);//});
        });

Еще одна вещь, я использую разные вкладки с разными розетками, если они разные!

constructor(private service: ResourcesService, private router: Router) {

    this.router.navigate([{ outlets: {  ['appUser'] : ['resources-list'] } }]);
}

Answer 1

this.resourcesService.getResources(data.text()) возвращает наблюдаемое, как я вижу.Если вы хотите отобразить данные из этой наблюдаемой трубы, используйте async канал в шаблоне или сохраните данные из наблюдаемой в локальной переменной и отобразите эту переменную в шаблоне (извините за мой английский). Также вы можете использовать mergeMap вместо вложенной подписки.

callGetResources() {
  if (this.route.outlet === Constants.APP_USER) {
    this.resources = this.resourcesService.getUser()
       .pipe(
          mergeMap(data => this.resourcesService.getResources(data.text())
       )

и в шаблоне используйте resources | async

или используйте локальную переменную

callGetResources() {
  if (this.route.outlet === Constants.APP_USER) {
    this.resourcesService.getUser()
       .pipe(
          mergeMap(data => this.resourcesService.getResources(data.text())
       )
       .subscribe(resources => this.resources = resources);