如何在Angular中根据Product的taxId关联合并Tax数据

需求说明 #

现有两个数据对象：

• Product：包含字段 _id、productName、taxId
• Tax：初始定义包含字段 _id、taxName、taxRate，后续补充为 _id、taxName、igstRate、cgstRate、sgstRate

需要在Angular中通过Product的taxId匹配对应的Tax对象，最终生成包含以下字段的合并对象（税务字段支持嵌套）：

_id
productName
taxId
taxName
igstRate
cgstRate
sgstRate

补充代码文件 #

1. 接口定义 #

product.ts

export interface Product {
  _id: string
  productName: string
  taxId: string
}

tax.ts

export interface Tax {
  _id: string
  taxName: string
  igstRate: number
  cgstRate: number
  sgstRate: number
}

2. 服务层代码（TaxService） #

export class TaxService {
  private productUrl = Url + 'products';
  private taxUrl = Url + 'taxs';

  constructor(private httpClient: HttpClient) {}

  getAllPdt(): Observable<Product[]> {
    return this.httpClient.get<Product[]>(this.productUrl);
  }

  getAllTax(): Observable<Tax[]> {
    return this.httpClient.get<Tax[]>(this.taxUrl);
  }

  getOneTax(id: string): Observable<any> {
    return this.httpClient.get(this.taxUrl + '/find/' + id);
  }
}

3. 已更新的组件代码 #

import { Component, OnInit } from '@angular/core';
import { TaxService } from '../services/tax.service';
import { Tax } from '../interfaces/tax';
import { Product } from '../interfaces/product';
import { combineLatest } from 'rxjs';

@Component({
  selector: 'app-tax',
  templateUrl: './tax.component.html',
  styleUrls: ['./tax.component.css'],
})
export class TaxComponent implements OnInit {
  taxs: Tax[] = [];
  products: Product[] = [];

  combinedItems : any[] = [];

  constructor(public taxService: TaxService) {}

  ngOnInit(): void {

    combineLatest([
      this.taxService.getAllPdt(),
      this.taxService.getAllTax(),
    ]).subscribe(([pdts, taxes]: [Product[], Tax[]]) => {

      if (taxes && pdts) {
        this.products = pdts;
        this.taxs = taxes;

        this.combinedItems = this.products
          .map((x) => {
            let productProperties = ({
              _id: x._id,
              productName: x.productName,
              taxId: x.taxId,
            } = x);

            let taxItem = taxes.find((z) => z._id == x.taxId);
            if (taxItem) {
              let taxProperties = ({
                taxName: taxItem.taxName,
                igstRate: taxItem.igstRate,
                cgstRate: taxItem.cgstRate,
                sgstRate: taxItem.sgstRate,
              } = taxItem);
              let item = { ...productProperties, ...taxProperties };
              console.log(item);
              return item
            }

            return null;
          })
          .filter((x) => x !== null);
      }
console.log(this.combinedItems)
    });
  }
}

内容的提问来源于stack exchange，提问作者Dasharath Sagar Nariman