如何在 Angular 中使函数成为 Observable

Question

我的 IONIC 应用程序中有以下代码，它设置了一些过滤器。第一次运行过滤器总是未定义，因为查询在完成设置之前执行。我的代码所做的是从离子存储中获取当前过滤器对象，更新存储，然后获取新更新的对象并对 api.

执行 http 请求

setFilter(params: any) {
    console.log('calling Set Filter');
    // tslint:disable: max-line-length
    this.storage.get('filter').then(filterStored => {
      console.log('Filter ', filterStored);

      if (params.type === 'privacy') {
      this.storage.set('filter', { privacy: params.option.name, occupancy: filterStored.occupancy, status: filterStored.status } ).then(res => {});
    }
      if (params.type === 'occupancy') {
      this.storage.set('filter', { occupancy: params.option.name, privacy: filterStored.privacy, status: filterStored.status  } ).then(res => {});
    }

      if (params.type === 'status') {
      this.storage.set('filter', { status: params.option.name, privacy: filterStored.privacy, occupancy: filterStored.occupancy } ).then(res => {});
    }

  this.storage.get('filter').then(refreshfilterStored => {
  console.log('Updated Filter ', refreshfilterStored);
  this.queryFilter =  refreshfilterStored;
 });
});

this.farmStreetHouses$ = this.farmStreetHouseProvider.getFilteredPrivacy(this.farm.guid, this.street.sasn, this.queryFilter)
    .pipe(
      tap((res): any => {
        this.farmStreetHousesCache = res;
      }),
    );
}

所以我想要实现的是，在我们调用 farmStreetHouses Observable 之前，我们完成所有的事情，包括原始存储、更新存储、更新存储

Answer 1

如果您只是将 Observable 移动到过滤器获取的 then() 函数中，您应该为您的请求设置适当的过滤器：


setFilter(params: any) {
  console.log('calling Set Filter');
  // tslint:disable: max-line-length
  this.storage.get('filter').then(filterStored => {
    console.log('Filter ', filterStored);

    if (params.type === 'privacy') {
      this.storage.set('filter', { privacy: params.option.name, occupancy: filterStored.occupancy, status: filterStored.status } ).then(res => {});
    }
    else if (params.type === 'occupancy') {
      this.storage.set('filter', { occupancy: params.option.name, privacy: filterStored.privacy, status: filterStored.status  } ).then(res => {});
    }
    else if (params.type === 'status') {
      this.storage.set('filter', { status: params.option.name, privacy: filterStored.privacy, occupancy: filterStored.occupancy } ).then(res => {});
    }

    this.storage.get('filter').then(refreshfilterStored => {
      console.log('Updated Filter ', refreshfilterStored);
      this.queryFilter = refreshfilterStored;

      this.farmStreetHouses$ = this.farmStreetHouseProvider.getFilteredPrivacy(this.farm.guid, this.street.sasn, this.queryFilter)
        .pipe(tap((res): any => {
          this.farmStreetHousesCache = res;
        }));
    }
  });
});

（我想如果你像我这里那样修复缩进并使用 else 子句，代码会更容易阅读。）

如何在 Angular 中使函数成为 Observable

How to make a function an Observable in Angular

angular

ionic4