Получить сумму вычисляемых выражений зависит от шаблона переменной в Angular?

Question

У меня есть простой массив чисел:

 data:Array<number> = [1,2,3,4,5];

И у меня также есть редактируемый input, который является коэффициентом умножения.

справа, я показываю пользователюрезультат:

HTML-код довольно прост:

<table>
    <tbody>
        <tr *ngFor="let a of data">
            <td>{{a}}</td>
            <td><input type='text' #i [ngModel]="a" /></td>
            <td>{{i.value*a}}</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>-------<br/>sum ?</td>
        </tr>
    <tbody>
</table>

Обратите внимание, что результат умножения рассчитывается по шаблонупеременная (#i ----> i.value*a)

Вопрос:

Но как я могу вычислить сумму этого вычисляемого столбца?Интересно, смогу ли я сделать это только через шаблон.Конечно, я могу найти решения через TS.
Но мне интересно, могу ли я сделать это только с помощью шаблонных вычислений

nb Я использовал [ngModel], а не банан, так как мне нужно показать (ввход) значение левой стороны при инициализации, и если я сделаю банан, когда я изменю значение ввода, это также изменит значение левой стороны - что мне не нужно.

StackBlitz

Answer 1

Обдумывал это в течение полдня.Наконец-то нашли решение вышесказанного.All value manipulations directly from html are often discouraged as these don't qualify as good code practices. Тем не менее, я реализовал решение следующим образом.Добавьте следующее в component.ts.

data : Array<number> = [1,2,3,4,5];
sum  : Array<number> = [0];

Добавьте следующий код в component.html

<table>
 <tbody>

  <ng-container *ngIf="{sample : sum} as variable">

   <tr *ngFor="let a of data;let index of index">
    <td>{{a}}</td>
    <td><input type='text' #i [ngModel]="a"/></td>
    <td>{{i.value*a}}</td>
    <td style="display:none;">{{variable.sample[index] = variable.sample[index-1]+i.value*a}}</td>
   </tr>

   <tr>
     <td></td>
     <td></td>
     <td>Sum={{variable.sample[5]}}</td>
   </tr>

  </ng-container>

 </tbody>
</table>

В основном я использовал Array<number> с именем sum, которыйбудет держать сумму во время каждой итерации ngFor.Я рассчитываю то же самое, используя expression внутри последнего td и {{variable.sample[index] = variable.sample[index-1]+i.value*a}}.Для каждой итерации цикла переменная sample обновляется с новой суммой.Для любого change значения input значение переменной sample также изменяется, и это отражается как итоговое значение.

Надеюсь, это поможет.A nice and challenging question it is, I must say!.

--- EDIT1 ---

Дело не удалось в случае непоследовательных номеров.По сути, let a of data;let index of index имеет два условия цикла.В условных обозначениях условие оценивается как <tr ngFor let-index="$implicit" ngFor let-a="$implicit" [ngForOf]="data">, что преобразует index и a в неявные переменные для цикла над data, что означает index === a.Я исправил то же, что и ниже.Следующий код работает нормально для всех случаев:

<table>
 <tbody>

  <ng-container *ngIf="{sample : sum} as variable">
    <tr  *ngFor="let a of data;let in=index">
     <td>{{a}}</td>
     <td><input type='text' #i [ngModel]="a"/></td>
     <td>{{i.value*a}}</td>
     <td style="display:none;">{{variable.sample[in+1] =variable.sample[in]+ i.value*a}}</td>

    </tr>

    <tr>
     <td></td>
     <td></td>
     <td>SUM={{variable.sample[data.length]}}</td>
    </tr>

  </ng-container>

 </tbody>
</table>

Answer 2

Вам нужно использовать [(ngModel)].Проблема, когда мы используем ngModel с массивом, состоит в том, что мы не можем выполнить итерацию по одному и тому же массиву

   /***** This NOT valid ****/
    <tr *ngFor="let a of data;let i=index">
        <td><input type='text' [(ngModel)]="a" /></td>
    </tr>

См. Угловая двусторонняя привязка данных в строковом массиве не работает правильно

Итак, нам нужно использовать вспомогательную переменную

  //in ts
  data:Array<number> = [1,2,3,4,5];
  count:number[]=new Array(this.data.length); //<--this is the auxiliar variable

  //for the sum, I use a getter
  get sum()
  {
    let sum=0;
    this.data.forEach((p,index)=>{
      sum+=p*index
    })
    return sum;
  }

In .html

<table>
    <tbody>
        <tr *ngFor="let item of count;let i=index">
            <td>{{i}}</td>
            <td><input type='text' [(ngModel)]="data[i]" /></td>
            <td>{{i*data[i]}}</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>-------<br/>{{sum}}</td>
        </tr>
    <tbody>
</table>