使用Angular10获取多个复选框值

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>

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

示例：

如果选中1和3 var x=1+3 x=4

此处为对象。键（详细信息）将为您提供对象中以数组形式存在的键的名称（如[“a”、“b”、“c”）

所以我们有了数组，现在我们使用了一个与for循环相同的映射函数（i表示索引），x表示数组的第一项，因此在第一次运行时x将等于“a”（因为a是Object.keys（details）的第一个值）。现在我们将通过if（details[x]）检查对象中的第一个键是否包含值这将与详细信息[“a”]相同，因此如果该值为真，我们将i+1添加到总数中（因为i从0开始）

组成部分：

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

导出类AppComponent{
详细信息：记录={
a:错，
b:错，
c:错
};
public get xNumber（）：number{
常量numbermap={a:1，b:2，c:3}；
返回Object.entries（this.details）
//仅获取具有真值的条目
.filter（（[\u键，值]=>value）
//将具有true的键映射到数字数组
.map（（[key]）=>numbermap[key]）
//如果未选择`[].reduce（），则需要防止减少错误`
.concat（0）
//用reduce求和
.减少（（当前值=0，当前值）=>当前值+当前值）
}
提交（）{
console.log（这个.xNumber）；
}
}

模板：

你好，A
你好，B
你好，C
提交

---

谢谢你，但我是angular的新手，你能说得具体一点吗Hii Faizal我尝试了这段代码，但它返回了undefined@FaizalHussain，要在数组上循环使用

forEach

，

map

是对数组进行变换。如何获得true或false以及值？通过此方法，我只能获得value@Casaper，您不必使用

[ngModelOptions]

。仅当您使用被动表单时（当ngModel的输入位于

中时）才使用此选项我如何才能得到如果复选框是真还是假现在，我需要这两个them@Ashwin详细信息属性a、b和c是实时更新的。它们始终以布尔值形式包含其当前状态。请看我制作的stackblitz示例：@Eliseo问题是用表单而不是反应表单提出的。Angular到目前为止没有将ngModel表单标记为不推荐或不推荐我个人也喜欢反应形式，但我不会告诉OP选择什么。

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

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