Angular中带垫复选框的总和

Question

是否可以通过Angular中的复选框实现总和？我正在使用Angular Material的mat-复选框，并且想要实现以下目标：

我正在尝试以下操作：

component.ts

item1 = 10;
item2 = 20;
total = this.item1 + this.item2;

component.html

<mat-checkbox [ngModel]="item1">item 1</mat-checkbox>
<hr>
<mat-checkbox [ngModel]="item2">item 2</mat-checkbox>
<hr>
Total: {{ total }}

有什么想法吗？

Answer 1

使用change() eventEmitter并更新total

component.ts

export class CheckboxOverviewExample {
  item1 = { isChecked: false, value: 10 };
   item2 = { isChecked: false, value: 20 };

total = 0;

updateTotal(item) {
    if(item.isChecked) {
      this.total += item.value;
    } else {
      this.total -= item.value;
    }
    console.log(this.total)
  }
}

html

<mat-checkbox [(ngModel)]="item1.isChecked" (change)="updateTotal(item1)">item1</mat-checkbox>
<mat-checkbox [(ngModel)]="item2.isChecked"  (change)="updateTotal(item2)">item2</mat-checkbox>

Answer 2

“重新计算”总和比使用辅助变量更“可靠”。如果我们使用吸气剂，则不需要使用change事件，请参见stackblitz

  //if are variables

 <mat-checkbox [(ngModel)]="item1.isChecked" >item1</mat-checkbox>
 <mat-checkbox [(ngModel)]="item2.isChecked" >item2</mat-checkbox>
 {{total}}

  item1 = { isChecked: true, value: 10 };
  item2 = { isChecked: true, value: 20 };
  get total() {
    return (this.item1.isChecked ? this.item1.value : 0) +
           (this.item2.isChecked ? this.item2.value : 0)
  }

  //if we has an array of objects

  <mat-checkbox *ngFor="let item of items;let i=index" 
       [(ngModel)]="item.isChecked">item{{i+1}} : {{item.value}}
  </mat-checkbox>
 {{sumTotal}}


  items = [
    { isChecked: true, value: 10 },
    { isChecked: false, value: 20 },
    { isChecked: true, value: 20 },
  ]
  get sumTotal() {
    return this.items.filter(x => x.isChecked).reduce((a, b) => a + b.value + 0, 0)
  }