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

Question

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

1. 在单选按钮的情况下，为什么具有false 值的单选按钮甚至没有被“选中”，尽管值 模型中的更新为 false，如 plukr 所示。但是单选按钮没有选中，为什么会这样？

<input type="radio" name="status" (click)="is_active = false"> //not working    
<input type="radio" name="status" (click)="is_active = true"> //working

但是

<input type="radio" name="status" (click)="is_active = 'false'"> // working    
<input type="radio" name="status" (click)="is_active = true"> //working

1.1 其次如何在表单提交后移除单选按钮的控件（验证） （即使在表单提交后，单选按钮也会被选中，我正在使用 ngModel 提交表单）。

1. 如果是复选框，我有点困惑如何获取checked 复选框的值。 我不想使用（单击）方法来获取检查值。

<input type='checkbox' value='1' [checked]='is_checked = one'>One
<input type='checkbox' value='2' [checked]='is_checked = two'>Two
<input type='checkbox' value='3' [checked]='is_checked = three'>Three

我希望当复选框获得选中复选框的选中值时推送到选中复选框的数组中，否则它将拼接 （我知道上面的代码不起作用）。

<input type='checkbox' value='1' [checked]='checked("one")'>One
<input type='checkbox' value='2' [checked]='checked("two")'>Two
<input type='checkbox' value='3' [checked]='checked("three")'>Three

直到现在我都在使用这种方法，并且在课堂上我正在使用 javascript .checked 检查复选框的值， 如果为 true，则推入数组，否则通过索引从数组中拼接。

我的收音机工作区和复选框http://plnkr.co/edit/OXnj6U3udgkKYRAVCmkp

1. 如果选择/选项对我来说一切正常。但我想要这样的东西：

   Route1：Route1 上的选择/选项很少。用户在其中选择了几个选项。

   然后用户使用路由导航到另一个路由。

   但我希望当用户回到Route1 页面时刷新或Route1 上的所有选择/选项都像第一次一样被取消选择。

正如@GünterZöchbauer 在回答中所说，我尝试过同样的方法，但又没有成功。我正在尝试这段代码。

export class LsRules implements OnInit, CanReuse {
   .....Some Code Here...
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
        console.log('routerCanReuse called'); 
        return false; 
    }
   .....Some Code Here...
}

但甚至连这个控制台都不适合我。我也不知道ComponentInstruction 是什么。我哪里错了？

Answer 1

PrimeNG 单选按钮通过允许绑定到模型值来简化此操作。 http://www.primefaces.org/primeng/#/radiobutton

Answer 2

我认为 SO 宕机了几分钟。 对于复选框问题，您可以这样做。

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

    }
}

工作Demo

Answer 3

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

类似问题How to bind to radio buttons in angular2 beta 6

2) 你可以使用(change) 事件来获取值

3) 我猜你在实现时会得到你想要的

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

另见https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html