Question

任何人都可以帮忙，我想在选中复选框时获取选中的名称。在这里，我的要求是我不想在forloop中显示我的复选框。我曾经尝试过，但是我觉得这不是正确的方法。链接如下所示。

https://stackblitz.com/edit/angular-gv2vkj?file=src%2Fapp%2Fapp.component.ts

我在这里尝试过的操作接合不起作用。任何人都可以帮忙吗，还有其他最简单的方法吗？

Answer 1

请不要使用（更改），而应使用“角度方式”。那就是：在视图模型中思考。

  <input type="checkbox"  [(ngModel)]="variable"/>

由于您有多个“项目”，因此可以使用数组，因此有

  <input type="checkbox"  [(ngModel)]="variable[0]"/>
  <input type="checkbox"  [(ngModel)]="variable[1]"/>

不要忘记在.ts中声明

  variable:boolean[]=[];

您的函数“提交”考虑了数组并显示了值

submit()
{
   let result:string="";
   if (variable[0])
      result+=",Node"
   if (variable[1])
      result+=",Angular"
   ...
   result=result.substr(1);
}

其他提交方式是

  submit() {
    const values = ['Node', 'Angular', 'Php']
    let result = "";
    values.forEach((x, index) => {
      if (this.variable[index])
        result += "," + x;
    })
    result = result.substr(1);
    console.log(result)
  }

Answer 2

您还可以使用以下代码，该函数是单行代码，非常简单。只需将目标值传递给函数，然后根据值是否已存在于数组中来添加或删除该值：

<label class="contain">Node
  <input type="checkbox" value="node" (change)="onChange($event.target.value)">
</label>        
<label class="contain">Angular
  <input type="checkbox" value="angular" (change)="onChange($event.target.value)">
</label>
<label class="contain">PHP
  <input type="checkbox" value="php" (change)="onChange($event.target.value)">
  <span class="checkmark"></span>
</label>

然后使用onChange函数：

onChange(value) {
  this.Course.includes(value) ? this.Course.splice(this.Course.indexOf(value), 1) 
                                : this.Course.push(value)
}

Answer 3

您只能获得true和false之类的检查值。您可以使用（change）=“ onChange（$ event）”事件在复选框上触发事件。

在angular5中签入后如何获取复选框值

3 个答案: