Angular订阅链可观察

Posted 2023-02-24

我有一项服务，可以链接一组http请求并返回产品列表。这是我到目前为止的内容：

listForDisplay(categoryId: string): Observable<any[]> 
    if (!categoryId) return of([]);
    return this.listFields(categoryId);


private listFields(categoryId: string): Observable<any[]> 
    return this.fieldService.list(categoryId, true).pipe(
        flatMap((fields: Field[]) => 
            if (!fields) return of([]);
            return this.listProducts(categoryId, fields);
        ),
    );


private listProducts(categoryId: string, fields: Field[]): Observable<any[]> 
    return this.productService.listSpecificationProducts(categoryId).pipe(
        flatMap((products: any[]) => 
            if (!products) return of([]);
            return this.mapVisibleFields(fields, products);
        ),
    );


private mapVisibleFields(fields: Field[], products: any[]): any[] 
    console.log(products);
    return this.productModelService.mapProductsWithSpecificationFields(fields, products);

在我的控制器中，我称之为：

private getCategory() 
    this.selectorSubscription = this.selectorService.category.subscribe(categoryId => 
        this.products = [];
        this.specificationService.listForDisplay(categoryId).subscribe((products: any[]) => 
            console.log(products);
            this.products = products;
        );
    );

问题是，第一部分的console.log返回一个数组。控制器中的console.log仅返回单个项目。...

喜欢这个：

我显然做错了什么。谁能帮忙？

答案

根据rxjs documentation，flatMap

将每个源值投影到一个Observable中，该值将合并到输出可观察到。

这就是为什么您的订阅被多次调用，每个值一次出现的原因。您确定需要flatMap吗？从您要尝试执行的操作看来，map更合适。