代码之家 › 专栏 › 技术社区 › koque

异步调用不起作用

angular

0

koque · 技术社区 · 7 年前

在BrandComponent类的ngInit函数中,我正在对BrandService对象的filterProduct()函数进行异步调用。

ngOnInit() {
    this.brandSidebarService.sidebarData$.subscribe(sidebarData => {
      this.brandService.filterProducts(sidebarData).subscribe(products => {
        this.products = products;
      })
    })
  }

这是BrandService类的filterProducts()函数:

public filterProducts(productFilters) {
    this.dataService.getProducts().subscribe(products => {
      let filteredProducts = products;
      filteredProducts = this.filterByBrands(productFilters[0], 
         filteredProducts);
      filteredProducts = this.filterByPrices(productFilters[1], 
         filteredProducts);
      filteredProducts = this.filterByRating(productFilters[2], 
          filteredProducts);  

      return of(filteredProducts);
    })
  }

在BrandComponent ngInit函数中,尽管BrandService的filterProducts()返回一个可观察的值,但我从下面显示的订阅中得到以下错误。

this.brandService.filterProducts(sidebarData).subscribe(products...

[ts] Property 'subscribe' does not exist on type 'Subscription'. Did you mean 'unsubscribe'?

我该怎么解决?

2 回复 | 直到 7 年前

1

Suren Srapyan 7 年前

你已经订阅了( this.dataService.getProducts() 结果 )从 filterProducts . 如果您想要一个额外的工作来处理结果数据,您可以 pipe 到 getProducts 函数并添加额外的映射器( map ),它映射结果。

import { map } from 'rxjs/operators';

public filterProducts(productFilters) {
    return this.dataService.getProducts().pipe(
       map(products => {
             let filteredProducts = products;
             filteredProducts = this.filterByBrands(productFilters[0], filteredProducts);
             filteredProducts = this.filterByPrices(productFilters[1], filteredProducts);
             filteredProducts = this.filterByRating(productFilters[2], filteredProducts);  

             return filteredProducts;
       })
    );
}

2

1

JB Nizet 7 年前

首先,错误与您发布的代码不匹配。它抱怨 subscribe 不存在于类型中 Subscription ,但您的方法实际上并不返回订阅。它不返回任何内容(即。 undefined ).

不要订阅。使用 map 把某物的可观察性转换成其它某物的可观察性。请注意,您并没有在任何地方指定类型,这样就防止了TypeScript在编译时发现错误,从而使您措手不及。所以我会在这里使用化妆类型,因为我不知道它们实际上是什么:

public filterProducts(productFilters: Array<ProductFilter>): Observable<Product> {
  // note the return keyword on the next line, which is necessary for your method to return something

  return this.dataService.getProducts().pipe(
    map(products => {
      let filteredProducts = products;
      filteredProducts = this.filterByBrands(productFilters[0], filteredProducts);
      filteredProducts = this.filterByPrices(productFilters[1], filteredProducts);
      filteredProducts = this.filterByRating(productFilters[2], filteredProducts);  

      return filteredProducts;
    })
  );
}