使用Angular10获取多个复选框值

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+3x=4

Answer 1

在这里，Object.keys(详细信息)将给出对象中的键名为数组(作为"a“、"b”、“c”)；

所以我们有一个数组，现在我们使用一个与for循环相同的map函数(i表示索引)，x表示数组的第一项，因此在第一次运行时x将等于“a”(a是Object.keys(details)的第一个值)。现在，我们将检查对象中的第一个键是否包含与details"a“相同的值，因此如果值为true，则将i+1添加到总数中(从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>

这个关于Stackblitz的例子