Question

我有一组Requirement对象和一组product对象。每个需求与产品都有一对多的关系，即一个需求具有多个产品。每个产品对象中都有一个需求对象，我们可以通过访问requirement.id值从该需求对象中找出该需求属于哪个需求。

现在我有了这个HTML模板

<div class="row" *ngFor="let requirement of requirements; let i= index">
  <div class="col-md-12" style="margin-bottom: 15px;">
    <h3 style="display: inline">{{requirement.title}}</h3>

    <table class="table table-bordered table-hover">
      <tr>
        <th>Product Name</th>
        <th>Unit Cost</th>
        <th>Qty</th>
        <th>Unit</th>
        <th>Total Cost</th>
        <th>Product Profit</th>
        <th>Product VAT</th>
        <th>Total Price</th>
      </tr>
      <tr *ngFor="let product of products | productFilter: requirement">
        <td>{{product.name}}</td>
        <td>{{product.unitCost}}</td>
        <td>{{product.qty}}</td>
        <td>{{product.unit}}</td>
        <td>{{product.totalCost | number:'.'}}</td>
        <td>{{product.profit | number:'.'}}</td>
        <td>{{product.vat | number:'.'}}</td>
        <td>{{product.totalPrice | number:'.'}}</td>
      </tr>
      <tr>
        <td colspan="7"><strong>Sub-Total</strong></td>
        <td><strong>{{requirement.requirementTotal}}</strong></td>
      </tr>
    </table>
  </div>
</div>

该模板循环遍历每个需求，然后为每个需求填充产品表。我正在使用自定义管道来过滤每种需求的产品。

这是我的自定义管道的代码

@Pipe({
  name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
  transform(products: Product[], requirement: Requirement): Product[] {
    const filteredProducts = products.filter(product => product.requirement.id === requirement.id);
    return filteredProducts;
  }
}

但这并没有给我预期的结果。我在需求数组中有两个需求，在产品数组中有4个产品。每个需求有2个产品。但是，每次我加载页面时，任何一项要求中只有2种产品会显示出来，而其他两种产品则不会显示在表格中。

请注意，以前我在每个* Gif上都得到了预期的结果我的表格中的<td>元素使用以下代码

<td *ngIf = "product.requirement.id===requirement.id">{{product.name}}</td>

如何解决此问题。请帮助

Answer 1

为什么不只在tr上使用* ngIf来完成？老实说，我可以通过使用地图对数据进行预排序来解决该问题，但是我看不出为什么在tr上使用单个* ngIf无法正常工作。

无论如何，您的管道无法正常工作，因为出于您的目的，您将需要不纯的管道，并且您必须明确地标识管道。参见https://angular.io/guide/pipes#pure-and-impure-pipes

角度自定义管道用于过滤数组

1 个答案: