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

Posted 2023-03-13

【中文标题】如何在另一个 *ngFor 中显示其他组件

【英文标题】：How to display other component in one other *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。我的问题是，如何在这个表中显示计算机？

【参考方案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;

代码看起来不错。如果它仍然不起作用，您可以发布更多详细信息或单独的问题。我一定会回答的：）

谢谢。这是我针对这个问题的帖子。请看***.com/questions/49295200/…