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

【问题标题】：How to display other component in one other *ngFor如何在另一个 *ngFor 中显示其他组件
【发布时间】：2018-08-22 19:09:30
【问题描述】：

我在 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}}中显示为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;
  }

您能建议我任何解决方案吗？如何解决？

【问题讨论】：

如果你能做这个的stackblitz项目会很有帮助
您想打印{{item.product_type_name}}，但您的项目在prodcttype: ProductType[] 中有productTypes 数组。那么共享的信息是否有任何差距，或者您想打印数组中的所有product_type_names？
关节是product_type_id，所以列表中有4种产品类型，每种都有product_type_id和product_type_name。产品只有 producty_type_id 到 producttype。
好吧，这意味着在products 它的prodcttype: ProductType 不是数组。您想打印producttype 的product_type_name 吗？仍然无法理解您面临的问题或问题。
我有一个销售表格，在这个表格中我有一些销售数据和我们想要销售的产品，这个表格我在表格中显示（如在帖子中）我的产品，在这个产品中我有产品类型，例如计算机，这个产品有 product_type_id: 123456。现在，在我的表中，我只显示 123456，但我想显示 Computer。 Computer，123456 在 ProductType 中，而 Product 中只有 123456。我的问题是，如何在这个表中显示计算机？

标签： html angular typescript ngfor

【解决方案1】：

根据 cmets 中的详细问题，我建议您在组件中创建一个新函数，该函数将过滤 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 的产品名称。

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

【讨论】：

完美工作！非常感谢:)
如果可以的话，还有其他问题。在这种情况下，如果我想使用其他产品。如何编辑此功能。例如 getProductName(productTypeId: string) { const [filteredProdType] = this.producttype.filter(pt => pt.product_type_id== productTypeId);返回过滤的ProdType.product_type_name； const [filteredProd] = this.contrat.filter(pt => pt.contrat_id === productTypeId);返回filteredProd.contratdesc;}
代码看起来不错。如果它仍然不起作用，您可以发布更多详细信息或单独的问题。我一定会回答的：）
谢谢。这是我针对这个问题的帖子。请看stackoverflow.com/questions/49295200/…