Angular 2 - ngModel 不检查复选框答案

【问题标题】：Angular 2 - ngModel not checking CheckboxAngular 2 - ngModel 不检查复选框
【发布时间】：2017-03-02 07:40:19
【问题描述】：

我正在尝试创建一个性别选择视图，包括男性、女性和其他（凯特琳詹纳之类的东西）。

我目前拥有的是这样的：

在复选框标签旁边有 SVG（复选框将在生产中隐藏，现在在 plunkr 中可见以进行调试）

但是当我点击“女性”时，它会将焦点更改为复选框而不是选中它。

Plunkr：http://plnkr.co/edit/Z0Dq2sfJaBrE6Mae2Kg1?p=info

代码：

css

svg { 
  width: 15px; height: 15px;

  border: 2px solid #a13b4a;
}
label {
  display: inline-block;
  padding-left: 1.5em;
  position: relative;
  cursor: pointer;
  color: black;

}
input[type="checkbox"] {
  opacity: 0;
  width: 15px;
  height: 15px;
}
label svg path {
  transition: stroke-dashoffset .4s linear;
}
input[type="checkbox"]:checked ~ label svg path {
  stroke-dashoffset: 0;
}
input[type="checkbox"]:checked ~ label {
  color: #a13b4a;
}

html

 <div>
                            <input type="checkbox" id="male" [(ngModel)]="isMale" name="isMale"/>
                            <label (click)="select('male')" for="male">Male
                                <svg (click)="select('male')" viewBox="0 0 60 40" xmlns="http://www.w3.org/2000/svg"><path d="M21,2 C13.4580219,4.16027394 
                                1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896 
                                41.321398,1.67860195 39,4 C36.1186011,6.88139893.11316157,27.1131616 5,29 C10.3223659,34.3223659 
                                30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697 
                                46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498 
                                17,34 C17,40.4724865 54,12.4064021 54,17 
                                C54,23.7416728 34,27.2286213 34,37"
                                id="male-path" stroke-width="4" fill="none" stroke="#a14b4a" stroke-dasharray="270" stroke-dashoffset="270"></path></svg>
                            </label>
                        </div>
                        <div>
                            <input type="checkbox" id="female" [(ngModel)]="isFemale" [checked]="isFemale" name="isFemale"/>
                            <label for="female" (click)="select('female')">Female
                                <svg (click)="select('female')" viewBox="0 0 60 40" xmlns="http://www.w3.org/2000/svg"><path d="M21,2 C13.4580219,4.16027394 
                                1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896 
                                41.321398,1.67860195 39,4 C36.1186011,6.88139893.11316157,27.1131616 5,29 C10.3223659,34.3223659 
                                30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697 
                                46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498 
                                17,34 C17,40.4724865 54,12.4064021 54,17 
                                C54,23.7416728 34,27.2286213 34,37"
                                id="female-path" stroke-width="4" fill="none" stroke="#a14b4a" stroke-dasharray="270" stroke-dashoffset="270"></path></svg>
                            </label>  
                        </div>
                        <div>
                            <input type="checkbox" id="other" [(ngModel)]="isOther" name="isOther"/>
                            <label for="other" (click)="select('other')">Other
                                <svg (click)="select('other')" viewBox="0 0 60 40" xmlns="http://www.w3.org/2000/svg"><path d="M21,2 C13.4580219,4.16027394 
                                1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896 
                                41.321398,1.67860195 39,4 C36.1186011,6.88139893.11316157,27.1131616 5,29 C10.3223659,34.3223659 
                                30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697 
                                46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498 
                                17,34 C17,40.4724865 54,12.4064021 54,17 
                                C54,23.7416728 34,27.2286213 34,37"
                                id="other-path" stroke-width="4" fill="none" stroke="#a14b4a" stroke-dasharray="270" stroke-dashoffset="270"></path></svg>
                            </label>
                        </div>

public isMale:boolean;
  public isFemale:boolean;
  public isOther:boolean;

  constructor() {
    this.isMale = true;
    this.isFemale = false;
    this.isOther = false;

  }
     select(gender:string){
        console.log("switch");
        switch(gender){
            case 'male': {
                console.log("male");
                this.isMale = true;
                this.isOther = false;
                this.isFemale = false;

                break;
            }
            case 'female' : {console.log("female");
                this.isFemale = true;
                this.isOther = false;
                this.isMale = false;

                break;
            }
            default: {console.log("default");
                this.isFemale = false;
                this.isMale = false;
                this.isOther = true;
            }
        }
        console.log("status: male:"+this.isMale+";;female:"+this.isFemale+";;other:"+this.isOther);
    }

【问题讨论】：

标签： angular svg checkbox

【解决方案1】：

您的实施存在两个问题。

您不想在此处使用[(ngModel)]，因为您正在从控制器更新值。只需使用 [checked] 指令将状态反映到复选框
您不想在此处使用“for”属性，因为您已经在标签上定义了单击。这将触发 2 次点击而不是 1 次（1 次来自“for”属性，1 次来自 (click) 事件）

我用一个工作示例更新了你的 plunker

http://plnkr.co/edit/y8qAbkBljG1TbVu5TKMX?p=preview

【讨论】：

【解决方案2】：

.html

<input type="radio" name="radioOption" [(ngModel)]="option" id="radio1" value="1"/>

<input type="radio" name="radioOption" [(ngModel)]="option" id="radio2" value="2" />

.ts

export class PaymentMethodComponent implements OnInit {
  option: string;

  constructor() {
    this.option= '1'
  }

}

您需要设置变量的值，即option = 1，然后您的复选框/单选按钮将根据提供的值默认被选中。

注意：确保对单选按钮进行分组，保持名称与按名称分组相同。

【讨论】：