javascript - Angular 嵌套 *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

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

<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将数量乘以价格得出总数，那么我们不需要为此维护一个单独的数组，我们只需在 View 中将其相乘即可得到它:

<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>