javascript - 获取计算表达式的总和取决于 Angular 中的模板变量？

Question

我有一个简单的数字数组:

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

我还有一个可编辑的输入，它是一个倍增因子。

在右侧，我向用户显示结果:

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 找到解决方案。
但我想知道我是否只能通过模板计算来做到这一点

注意 我使用了 [ngModel] 而不是 banana 因为我需要在初始化时显示(在输入中)左侧值，如果我要显示 banana ，当我更改输入值时，它还会更改左侧的值——我不希望这样。

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变量值也发生变化，这反射(reflect)为总计。

希望这对您有所帮助。 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>