Forms 单选框、复选框和选择/选项在angular2中绑定

单选按钮、复选框和选择/选项绑定在angular2中遇到一些问题

对于单选按钮，为什么具有

false

值的单选按钮甚至没有“选择”，尽管该值 在中，模型更新为false，如plukr所示。但是单选按钮没有被选中为什么

我想当复选框得到checked复选框的checked值时，将其推入checked复选框数组，否则它将拼接 （我知道上面的代码不起作用）

但这台主机连一台都不适合我。还有什么是

ComponentInstruction

，我不知道。我错在哪里？

1）

单选按钮有一些问题

我让它工作得很好

<input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'"  name="sex" value="male">Male<br>
<input type="radio" [ngModel]="{checked: model.sex == 'female'}"  (ngModelChange)="model.sex='female'" name="sex" value="female">Female

另见

1）

单选按钮有一些问题

我让它工作得很好

<input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'"  name="sex" value="male">Male<br>
<input type="radio" [ngModel]="{checked: model.sex == 'female'}"  (ngModelChange)="model.sex='female'" name="sex" value="female">Female

---

另请参见

我想是这样的，我们已经谈了几分钟了。 对于复选框问题，您可以这样做

<input type='checkbox' value='1' [(ngModel)]='is_checked_one' (change)="myFun('one')" >One
<input type='checkbox' value='2' [(ngModel)]='is_checked_two' (change)="myFun('two')" >two


export class AppComponent {
   is_active:boolean;
   is_checked_one:boolean=false;
   is_checked_two:boolean=false;

  val:Array<any>= [];
    constructor() { 
      console.log('Component called');
    }

    myFun(selected)
    {
      console.log(this.is_checked_one + " " + selected);
        if('one'===selected)
        {
          if(this.is_checked_one===false)
          {
            console.log('one if');
            this.val.push('one');
          }
          else
          {
            console.log('one else');
            let index=  this.val.indexOf('one');
            console.log(index);
            this.val.splice(index,1);
          }
        }
        else
        {
          if(this.is_checked_two==false)
          {
            console.log('two if');
            this.val.push('two');
          }
          else
          {
            console.log('two else');
            let index=  this.val.indexOf('two');
            console.log(index);
            this.val.splice(index,1);
          }
        }
        }
        }

    }
}

1
二
导出类AppComponent{
是活动的：布尔值；
是否检查一个：布尔值=false；
是否检查了两个：布尔值=false；
val:Array
我想是的，它已经停了几分钟了。
对于复选框问题，您可以这样做

<input type='checkbox' value='1' [(ngModel)]='is_checked_one' (change)="myFun('one')" >One
<input type='checkbox' value='2' [(ngModel)]='is_checked_two' (change)="myFun('two')" >two


export class AppComponent {
   is_active:boolean;
   is_checked_one:boolean=false;
   is_checked_two:boolean=false;

  val:Array<any>= [];
    constructor() { 
      console.log('Component called');
    }

    myFun(selected)
    {
      console.log(this.is_checked_one + " " + selected);
        if('one'===selected)
        {
          if(this.is_checked_one===false)
          {
            console.log('one if');
            this.val.push('one');
          }
          else
          {
            console.log('one else');
            let index=  this.val.indexOf('one');
            console.log(index);
            this.val.splice(index,1);
          }
        }
        else
        {
          if(this.is_checked_two==false)
          {
            console.log('two if');
            this.val.push('two');
          }
          else
          {
            console.log('two else');
            let index=  this.val.indexOf('two');
            console.log(index);
            this.val.splice(index,1);
          }
        }
        }
        }

    }
}

1
二
导出类AppComponent{
是活动的：布尔值；
是否检查一个：布尔值=false；
是否检查了两个：布尔值=false；
val:Array
通过允许绑定到模型值来简化单选按钮的设置。
通过允许绑定到模型值来简化单选按钮的设置。
是的，这一个在我的情况下也可以，但是在
真/假
的情况下不起作用。试试吧！嗯，明白了。谢谢。如果你阅读我的其他问题，我将非常感谢是的，这一个在我的情况下也有效，但在
true/false
的情况下不起作用。嗯，知道了。谢谢。如果你阅读我在与复选框相关的问题中的其他问题并选择并回答这些问题，我将非常感谢。我担心你的插件不起作用。我哈哈我已经更新了plunkr。请检查。您使用了复选框吗？或者我应该指导您吗？对于3个问题，您面临什么问题？如果您可以指导我有关复选框，则否。对于第3个问题，当用户单击浏览器的“上一步”按钮时，我希望在发送后重置/引用整个页面。恐怕您的plunkr无法工作。我已经更新了plunkr。请检查它。您完成了复选框？或者我应该指导你吗？对于3个问题，你面临什么问题？如果你能指导我有关复选框，则否。对于第3个问题，当用户单击浏览器的“上一步”按钮时，我希望在路由后重置/引用整个页面。我只是在向数组添加值。我希望你能自己弄清楚。
[（ngModel）]
这里？其次，如果用户取消选中复选框并再次选中该怎么办？我认为这不是正确的答案。不是吗？ngModel为每个复选框创建新的范围或新的模型，并允许您单独使用它们，因为一个复选框可以被选中和取消选中。因此，您不能只使用一个模型或不使用模型。好的，给我一些时间我会很快更新我的答案以取消选中复选框…您的代码在没有
ngModel
的情况下也可以正常工作。在示例中，您在哪里为复选框添加了decare model？现在检查并了解我为什么使用
[（ngModel）]
。如果有任何不符合要求，请更新我……我只是在向数组中添加值。我希望您能自己解决其他问题。
[（ngModel）]
这里？其次，如果用户取消选中复选框并再次选中该怎么办？我认为这不是正确的答案。不是吗？ngModel为每个复选框创建新的范围或新的模型，并允许您单独使用它们，因为一个复选框可以被选中和取消选中。因此，您不能只使用一个模型或不使用模型。好的，给我一些时间我会很快更新我的答案，以取消选中复选框。您的代码在没有
ngModel
的情况下也可以正常工作。示例中，您在哪里为复选框添加了decare model？现在检查并了解我为什么使用
[（ngModel）]
。如果有任何问题，请更新我。。。。
export class LsRules implements OnInit, CanReuse {
   .....Some Code Here...
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
        console.log('routerCanReuse called'); 
        return false; 
    }
   .....Some Code Here...
}

<input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'"  name="sex" value="male">Male<br>
<input type="radio" [ngModel]="{checked: model.sex == 'female'}"  (ngModelChange)="model.sex='female'" name="sex" value="female">Female

routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return false; }

<input type='checkbox' value='1' [(ngModel)]='is_checked_one' (change)="myFun('one')" >One
<input type='checkbox' value='2' [(ngModel)]='is_checked_two' (change)="myFun('two')" >two


export class AppComponent {
   is_active:boolean;
   is_checked_one:boolean=false;
   is_checked_two:boolean=false;

  val:Array<any>= [];
    constructor() { 
      console.log('Component called');
    }

    myFun(selected)
    {
      console.log(this.is_checked_one + " " + selected);
        if('one'===selected)
        {
          if(this.is_checked_one===false)
          {
            console.log('one if');
            this.val.push('one');
          }
          else
          {
            console.log('one else');
            let index=  this.val.indexOf('one');
            console.log(index);
            this.val.splice(index,1);
          }
        }
        else
        {
          if(this.is_checked_two==false)
          {
            console.log('two if');
            this.val.push('two');
          }
          else
          {
            console.log('two else');
            let index=  this.val.indexOf('two');
            console.log(index);
            this.val.splice(index,1);
          }
        }
        }
        }

    }
}