Question

我在html中有这个表

<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获取我的productType，就像这样

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

产品类型具有此属性

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

我希望在此{{item.product_type_id}} - ＆gt;中以html格式显示{{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。代码如下：

在componnent

中添加以下功能

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>

这将使用item获取product_type_id的产品名称。

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

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

1 个答案: