我有一个简单的数字数组:
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]
而不是香蕉,因为我需要在初始化时显示(在输入中)左侧值,如果我想做香蕉,那么当我更改输入值时,它也会改变左侧值-我不需要。
答案 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
中使用expression
和td
计算相同的值。对于循环的每次迭代,{{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>