使用 Angular 10 获取多个复选框值

Question

app.component.html

<form #x="ngForm" (ngSubmit)="submit()">
    <div class="form-check form-check-inline">
            <input [(ngModel)]="details.a" #a="ngModel" type="checkbox" value="1">
            <label class="form-check-label" for="inlineCheckbox1">HELLO A</label>
        </div>
    <div class="form-check form-check-inline">
            <input [(ngModel)]="details.b" #b="ngModel" type="checkbox" value="2">
            <label class="form-check-label" for="inlineCheckbox1">HELLO B</label>
        </div>
    <div class="form-check form-check-inline">
            <input [(ngModel)]="details.c" #c="ngModel" type="checkbox" value="3">
            <label class="form-check-label" for="inlineCheckbox1">HELLO C</label>
        </div>

<button [disabled]="!x.valid" >Submit</button>

</form>

App.Component.ts

export class AppComponent implements OnInit {
details:{
    a:boolean,
    b:boolean,
    c:boolean
} = {
    a:null,
    b:null,
    c:null
}
constructor(){
}
submit(){
    console.log(this.details) //to get true or false if checked
 }  

我正在尝试获取复选框的状态和值，如果选中，我需要将值分配给变量

示例：

如果选中 1 和 3 变量 x = 1 + 3 x = 4

Answer 1

这里 Object.keys(details) 将为您提供对象中存在的键的名称作为数组（如 ["a" , "b" , "c"];

所以我们有了数组，现在我们使用与for循环相同的map函数（i表示索引），x表示数组的第一项，所以第一次运行x将等于“a”（ as a 是 Object.keys(details) 的第一个值。现在我们将通过 if(details[x]) 来检查 object 中的第一个键是否包含值，这将与 details["a"] 相同，所以如果值为 true 我们将 i+1 添加到总数中（因为 i 从 0 开始）

 let total = 0
    Object.keys(details).map((x,i)=>{
    if(details[x]){
     total = total + (i+1)
    
    }
    
    })

Answer 2

组件：

export class AppComponent {
  details: Record<'a' | 'b' | 'c', boolean> = {
    a: false,
    b: false,
    c: false
  };

  public get xNumber(): number {
    const numbermap = { a: 1, b: 2, c: 3 };
    return Object.entries(this.details)
      // get only the entries with true value
      .filter(([_key, value]) => value)
      // map the keys having true to an array of numbers
      .map(([key]) => numbermap[key])
      // requred for preventing error from reduce if none selected `[].reduce()`
      .concat(0)
      // sum the numbers with reduce
      .reduce((prev = 0, curr) => prev + curr)
  }

  submit() {
    console.log(this.xNumber);
  }
}

模板：

<form #x="ngForm" (ngSubmit)="submit()">
    <div class="form-check form-check-inline">
        <input
          id="detailsA"
          name="a"
          [(ngModel)]="details.a"
          type="checkbox" />
        <label class="form-check-label" for="detailsA">HELLO A</label>
    </div>
    <div class="form-check form-check-inline">
        <input
          id="detailsB"
          name="b"
          [(ngModel)]="details.b"
          type="checkbox" />
        <label class="form-check-label" for="detailsB">HELLO B</label>
    </div>
    <div class="form-check form-check-inline">
        <input
          id="detailsC"
          name="c"
          [(ngModel)]="details.c"
          type="checkbox" />
        <label class="form-check-label" for="detailsC">HELLO C</label>
    </div>

    <button [disabled]="x.invalid" >
    Submit
  </button>
</form>

This example on Stackblitz