可观察数据更新时如何更新视图中的数据？

Question

我正在订阅一个可观察对象 (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 时会获取新数据。但是，this.subscription 不会更新视图中的数据，除非我对其进行刷新。知道我做错了什么或如何解决这个问题吗？

Answer 1

由于 angular 中的 api 调用是异步的，因此对 api getContentFulEntry() 的调用发生在对 getLanguage() 的调用完成之前。您的 fulentry 调用使用相同的语言，因此即使 api 调用仍在进行，它也不会在 UI 上更新，就好像您在浏览器控制台中看到它传递了旧语言值一样。所以请在第一次完成后调用第二种方法。

Answer 2

您正在引用从 stateService.getLanguage() 返回的数据值（可能）在 getLanguage() 返回值之前。

通过在您对 getLanguage() 的订阅中调用 getContentfulEntry() 来确保 this.lang 具有值。这将确保 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() 的返回值分配给充当 Observable 的 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);
    });
});

可观察数据更新时如何更新视图中的数据？

How to update the data in the view when observable data gets updated?

javascript

rxjs

typescript

angular

angular-changedetection