如何在另一个 *ngFor 中显示其他组件

Question

我在 html

中有这个 table

<form [formGroup]="myform" (ngSubmit)="submit()" >
       <tbody>
              <tr class="group" *ngFor="let item of products;">
                <td>
                  <div>
                    {{item.product_type_id}}
                  </div>
                </td>
                <td>{{item.product_id}}</td>
               </tr>
          </tbody>
    <form>

我在 ts 代码中有这个产品：this.products = this.ps.getProduct(); 获取我所有的产品。产品有这个属性

export class Products {
    product_id: number;
    product_type_id: number;
    prodcttype: ProductType[];}

当我创建产品时，我从 ws 获取我的产品类型，就像这样

this.pts.getAllProductType().subscribe(
  producttype => {
    this.producttype = producttype;
  }
);

产品类型有这个属性

export class ProductType {
    product_type_name: string;
    description: number;
    default_price: number;
    product_type_id: string;}

我想在html中显示在这个{{item.product_type_id}} --> {{item.product_type_name}}

目前这不起作用，因为 product_type_name 未在产品中找到

ts代码：

    this.myform= new FormGroup({
      'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
      'invoice_date': new FormControl('', Validators.required),
      'client_id': new FormControl('', Validators.required),
      'products': this.fb.array([])    
    });

  ngOnInit() {

    this.products = this.ps.getProduct();
    console.log(this.products)

    this.pts.getAllProductType().subscribe(
      producttype => {
        this.producttype = producttype;
      }
    );
  submit() {}
}

服务产品类型

  public getAllProductType(): Observable<ProductType[]> {
    let headers = new Headers();
    headers.append('x-access-token', this.auth.getCurrentUser().token);
    return this.http.get(Api.getUrl(Api.URLS.getAllProductType), {
      headers: headers
    })
      .map((response: Response) => {
        let res = response.json();
        if (res.StatusCode === 1) {
          this.auth.logout();
        } else {
          return res.StatusDescription.map(producttype => {
            return new ProductType(producttype);
          });
        }
      });
  }

服务产品

  private products: Products[] = [];
  getProduct() {
    return this.products;
  }

你能给我一些解决方案吗，如何解决？

Answer 1

根据评论中的详细问题，我建议您在组件中创建一个新功能，该功能将过滤 productType 并为您提供 productName。代码如下：

在组件中添加以下功能

getProductName(productTypeId: string) {
    const [filteredProdType] = this.producttype.filter(pt => pt.product_type_id== productTypeId);
    return filteredProdType.product_type_name;
}

并将模板更改为

<form [formGroup]="myform" (ngSubmit)="submit()" >
   <tbody>
          <tr class="group" *ngFor="let item of products;">
            <td>
              <div>
                {{item.product_type_id}}
              </div>
            </td>
            <td>{{getProductName(item.product_type_id)}}</td>
           </tr>
      </tbody>
<form>

这将使用 product_type_id.

获取 item 的产品名称

希望对您有所帮助。如果需要进一步的帮助，请添加评论。

如何在另一个 *ngFor 中显示其他组件

How to display other component in one other *ngFor

html

typescript

ngfor

angular