[英]Calculate and display total of input field when changing in Angular material table
我有一个 angular 材料表,其中包含输入字段。 需要计算总数(无按钮)并显示在底部。 另外当改变输入的数字时,应重新计算并显示。 它计算并显示 ts 文件中的总和,但当输入框中发生更改时,连接。 HTML代码
<ng-container matColumnDef="tuesday">
<th mat-header-cell *matHeaderCellDef> tuesday </th>
<td mat-cell *matCellDef="let transaction">
<mat-form-field>
<input [(ngModel)]="transaction.tuesday" placeholder="Field Name" matInput ="number"/>
</td>
<td mat-footer-cell *matFooterCellDef> {{getTotalCostTuesday() | currency}} </td>
</ng-container>
TS code
transactions: PeriodicElement[] = [
{ project: 'Hydrogen', monday:1, tuesday:2},
{ project: 'Helium', monday:1 ,tuesday: 5 },
{ project: 'Lithium' , monday:1, tuesday: 3},
{ project: 'Beryllium' , monday:1, tuesday: 4 },
];
getTotalCostTuesday() {
return this.transactions.map(t => t.tuesday
).reduce((acc, value) => acc + value, 0);
}
这种连接是由于value
(来自输入字段)是一个字符串。 在添加之前将其更改为数字。
getTotalCostTuesday() {
return this.transactions.map(t => t.tuesday
).reduce((acc, value) => acc + parseInt(value), 0);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.