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

Нам может потребоваться больше информации о том, как должны заполняться данные, я вижу, что тэг td повторяется неправильно при итерации с итогом, имея больше тд, чем тэгов. Также переменная total является свойством внутри элемента или отделена ?. А пока я могу привести примеры для некоторых сценариев ios:

Если вы хотите, чтобы сумма была в одном тд, а сумма - это свойство 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>

Если вы хотите, чтобы сумма была в одном тд, а сумма - это просто переменная вне массива элементов.

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

Если вы хотите, чтобы сумма была в одном тд, а сумма - это свойство 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>

Если вы хотите, чтобы сумма суммировалась в одном тд, а сумма - это просто переменная вне массива элементов.

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

Answer 2

Предполагая, что ваш уровень 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>

Редактировать: Если ОП умножает количество на цену, чтобы получить итоговое значение, нам не нужно поддерживать отдельный массив для этого, мы можем просто умножить это в представлении и получить это:

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