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

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

0 голосов
/ 27 сентября 2018

Я подписываюсь на наблюдаемую (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 ]

0 голосов
/ 27 сентября 2018

Вы ссылаетесь на значение данных, возвращаемых из 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), котороедействует как наблюдаемый.Вы можете подписаться на свой 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);
    });
});
0 голосов
/ 27 сентября 2018

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

...