RxJs映射后的未定义值

Posted 2023-01-07

为什么我在订阅方法中变得未定义？我正在尝试合并到数据源。客户和类别。我试图基于类别集合中匹配的CategoryId填充客户的Category属性。

STACKBLITZ

constructor(private http: HttpClient) 
  ngOnInit() 
    const custurmersWithCategory$ = combineLatest([
      this.http
        .get<ICustomer[]>(
          "https://www.json-generator.com/api/json/get/cgqEBPcHtu?indent=4"
        )
        .pipe(delay(1000)),
      this.http.get<ICategory[]>(
        "https://www.mocky.io/v2/5db4195d300000520057b70b"
      )
    ]).pipe(
       map(([customers, categories]) => 
         customers.map(
          customer =>
            (
              ...customer,
              Category: categories.find(
                c => customer.CategoryId === c.CategoryId
              ).category
             as ICustomer)
        );
      )
    );

    custurmersWithCategory$.subscribe(data => 
      console.log(data);// why is this undefined?
    );
  

答案

您需要return您的地图功能。

return customers.map(...

另一答案

您当前没有从map返回任何内容，因此得到undefined。如此处所述：https://stackoverflow.com/a/41743119/6294072您的代码将转换为类似的内容：

function (foo)  bar; 

完全不返回任何内容。因此添加

return customers.map( ...

它实际上将返回一些值。

STACKBLITZ

根据注释，如果不想添加return，则只需从map内部除去大括号。

STACKBLITZ

作为进一步的评论，就像我链接的答案中提到的那样，这与rxjs map无关，而是箭头函数的工作方式：）

另一答案

您只需要return

   return customers.map(
      customer =>
        (
          ...customer,
          Category: categories.find(
            c => customer.CategoryId === c.CategoryId
          ).category
         as ICustomer)
    );