Как обновить данные в представлении, когда наблюдаемые данные обновляются?

Я подписываюсь на наблюдаемую (getContentfulEntry) для получения некоторых данных, но также передаю данные из другой наблюдаемой (stateService)

this.langSubscription = this.stateService.getLanguage()
      .subscribe(val => {
        this.lang = val;
      });
      
    this.subscription = this.contentfulService.getContentfulEntry(this.footerEntryId, {locale: this.lang.toLowerCase()})
      .subscribe(res => {
        console.log('Footer Entries:: ', res);
        // this.contentfulData = res;
        this.filteredFooter = this.contentfulService.getFilteredEntryByProv(res, this.prov);
        console.log('Filtered Footer:: ', this.filteredFooter);
      });

к нему в качестве параметра. Таким образом, новые данные выбираются при обновлении this.lang. Тем не менее, эта подписка не обновляет данные в представлении, пока я не нажму кнопку Обновить. Есть идеи, что я делаю не так или как я могу это исправить?

Источник

2 ответа

Решение

Вы ссылаетесь на значение данных, возвращаемых из stateService.getLanguage() (возможно), прежде чем getLanguage () вернул значение.

Убедитесь, что this.lang имеет значение, сделав вызов getContentfulEntry() в вашей подписке на getLanguage(). Это гарантирует, что this.lang имеет значение при вызове getContentfulEntry()

this.langSubscription = this.stateService.getLanguage()
  .subscribe(val => {
    this.lang = val;
    this.subscription = this.contentfulService.getContentfulEntry(this.footerEntryId, { locale: this.lang.toLowerCase() })
      .subscribe(res => {
        console.log('Footer Entries:: ', res);
        // this.contentfulData = res;
        this.filteredFooter = this.contentfulService.getFilteredEntryByProv(res, this.prov);
        console.log('Filtered Footer:: ', this.filteredFooter);
      });
  });

Вы также можете рассмотреть возможность присвоения возвращаемого значения из getLanguage () BehaviorSubject (из rxjs), который действует как Observable. Вы можете подписаться на свой BehaviorSubject, который будет выдавать значение каждый раз, когда назначается новое значение. Я упоминаю субъекты поведения как способ управления параметрами, которые могут изменяться с течением времени, но не считаю это решение наилучшей практикой в ​​данном случае использования.

lang = new BehaviorSubject<string>('');

this.langSubscription = this.stateService.getLanguage()
  .subscribe(val => {
    // this.lang will emit the next assigned value "val"
    this.lang.next(val);
  });

// subscribe to emitted value from this.lang
this.lang.subscribe(val => {
  this.subscription = this.contentfulService.getContentfulEntry(this.footerEntryId, { locale: this.lang.getValue().toLowerCase() })
    .subscribe(res => {
      console.log('Footer Entries:: ', res);
      // this.contentfulData = res;
      this.filteredFooter = this.contentfulService.getFilteredEntryByProv(res, this.prov);
      console.log('Filtered Footer:: ', this.filteredFooter);
    });
});
Источник

Поскольку вызовы API в angular являются асинхронными, вызов api getContentFulEntry() происходит до завершения вызова getLanguage(). Ваш фуллентри вызов использует тот же язык, и, следовательно, даже вызов API происходит, он не обновляется в пользовательском интерфейсе, как если бы вы видели в консоли браузера, что он передает значение старого языка. Поэтому, пожалуйста, вызовите второй метод после первого завершения.

Источник
Другие вопросы по тегам