Angular 带mat复选框的角度总和

是否有可能在角度中使用复选框实现求和？我正在使用Angular Material的mat复选框，我希望实现以下目标：

我正在尝试以下方法：

组件技术

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

项目1

项目2

总计：{{Total}

有什么想法吗？

使用

change（）

eventEmitter并更新

total

组件技术

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

item1
项目2

使用

change（）

eventEmitter并更新

total

组件技术

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

item1
项目2

“重新计算”总和比使用辅助变量更“稳健”。如果使用getter，则不需要使用更改事件，请参阅

//如果是变量
项目1
项目2
{{total}}
item1={isChecked:true，value:10}；
item2={isChecked:true，value:20}；
获取总数（）{
返回（this.item1.isChecked？this.item1.value:0）+
（this.item2.isChecked？this.item2.value:0）
}
//如果我们有一个对象数组
项目{{i+1}}:{{item.value}
{{sumTotal}}
项目=[
{isChecked:true，value:10}，
{isChecked:false，值：20}，
{isChecked:true，value:20}，
]
获取sumTotal（）{
返回此.items.filter（x=>x.isChecked）.reduce（（a，b）=>a+b.value+0，0）
}

“重新计算”总和比使用辅助变量更“稳健”。如果使用getter，则不需要使用更改事件，请参阅

//如果是变量
项目1
项目2
{{total}}
item1={isChecked:true，value:10}；
item2={isChecked:true，value:20}；
获取总数（）{
返回（this.item1.isChecked？this.item1.value:0）+
（this.item2.isChecked？this.item2.value:0）
}
//如果我们有一个对象数组
项目{{i+1}}:{{item.value}
{{sumTotal}}
项目=[
{isChecked:true，value:10}，
{isChecked:false，值：20}，
{isChecked:true，value:20}，
]
获取sumTotal（）{
返回此.items.filter（x=>x.isChecked）.reduce（（a，b）=>a+b.value+0，0）
}
<代码>谢谢你，我是一个OTROO。谢谢
  //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)
  }