获取计算表达式的总和取决于Angular中的模板变量吗?

时间:2018-09-20 06:45:51

标签: javascript angular

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

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

我还有一个可编辑的input,它是一个乘法因子。

在右侧,向用户显示结果:

enter image description here

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

2 个答案:

答案 0 :(得分: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>的{​​{1}},它将在sum的每次迭代期间保存和。我在最后一个ngFor中使用expressiontd计算相同的值。对于循环的每次迭代,{{variable.sample[index] = variable.sample[index-1]+i.value*a}}变量都会使用新的总和进行更新。在sample值的任何change上,input变量值也会更改,这反映为总计。

希望这会有所帮助。 sample

--- EDIT1 ---

如果号码不连续,则失败。基本上,A nice and challenging question it is, I must say!有两个循环条件。用长记法表示,条件的取值为let a of data;let index of index,它将<tr ngFor let-index="$implicit" ngFor let-a="$implicit" [ngForOf]="data">index都转换为用于a上的循环的隐式变量,因此表示data。我已更正以下内容。以下代码适用于所有情况:

index === a

答案 1 :(得分:0)

您需要使用[(ngModel)]。当我们将ngModel与数组一起使用时,问题在于我们无法在同一数组上进行迭代

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

请参见Angular two way data binding in string array doesn't works correctly

所以我们需要使用一个辅助变量

  //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;
  }

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