角嵌套* ngFor

Question

我有一张表，该表具有两个嵌套的迭代，前三列用于迭代对象（项目）的数组，第四列是数字数组应进行迭代的（total=[30,70,100]

<table class="table"> 
    <thead class="thead-dark"> 
        <tr>
            <th>Item</th>
            <th>Unit Price</th>
            <th>Quantity</th>
            <th>Amount</th>    
        </tr>        
    </thead>

    <tbody>        
        <tr *ngFor="let i of item">  

            <td>{{i.product}}</td>
            <td>{{i.price}}</td>
            <td>{{i.quantity}}</td>

            <ng-container *ngFor="let t of total">
                <td>{{t}}</td>
            </ng-container>

        </tr>
    </tbody>
</table>

对象数组迭代良好，但是问题出在数字数组（total=[30,70,100]上，我试图将（ng-container *ngFor="let t of total"）放在不同的层次上，但是它总是填充在错误的方法，我很乐意为我提供解决方法。

Answer 1

假设数组的index级别相同，则始终可以使用index来跟踪和重复该元素。

<tr *ngFor="let i of item; let in=index">

  <td>{{i.product}}</td>
  <td>{{i.price}}</td>
  <td>{{i.quantity}}</td>

  <ng-container *ngFor="let t of total[in]">
    <td>{{t}}</td>
  </ng-container>

</tr>

编辑：如果OP将数量乘以价格即可得出总计，那么我们不需要为此维护一个单独的数组，只需在视图中将其相乘即可：

<tr *ngFor="let i of item; let in=index">

  <td>{{i.product}}</td>
  <td>{{i.price}}</td>
  <td>{{i.quantity}}</td>
  <td>{{i.price * i.quantity}}</td>


</tr>

Answer 2

我们可能需要有关如何填充数据的更多信息，我看到的是，在对总数进行迭代时，td标签以错误的方式重复，且tds比th标签多。另外，total变量是项目内部的属性还是分隔的？现在，我可以为您提供一些方案的示例：

如果要在一个td中包含总计，并且总计是i的属性

<tr *ngFor="let i of item">  

  <td>{{i.product}}</td>
  <td>{{i.price}}</td>
  <td>{{i.quantity}}</td>
  <td>{{i.total.join(,)}}</td>
</tr>

如果要在单个td中包含总计，而总计只是项目数组外部的变量。

<tr *ngFor="let i of item let index = index">  

  <td>{{i.product}}</td>
  <td>{{i.price}}</td>
  <td>{{i.quantity}}</td>
  <td>{{total[index]}}</td>
</tr>

如果要在单个td中对总数求和，并且总数是i的属性

<tr *ngFor="let i of item">  

  <td>{{i.product}}</td>
  <td>{{i.price}}</td>
  <td>{{i.quantity}}</td>
  <td>{{i.total.reduce((a, b) => a + b, 0)}}</td>
</tr>

如果要在单个td中对总数求和，而总数只是项目数组之外的变量。

<tr *ngFor="let i of item let index = index">  

  <td>{{i.product}}</td>
  <td>{{i.price}}</td>
  <td>{{i.quantity}}</td>
  <td>{{total[index].reduce((a, b) => a + b, 0)}}</td>
</tr>