Question

使用单选按钮面对某些问题，复选框和选择/选项绑定在angular2。

在单选按钮的情况下，为什么具有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其次，如何在表单提交后删除单选按钮的控件（验证）（即使在表单提交后选择了单选按钮getes，我使用ngModel进行表单提交）。

如果是复选框，我有点困惑如何获取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

如果选择/选项，一切正常。但我想要这样的东西：


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

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

但我希望当用户返回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

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

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

PrimeNG单选按钮允许绑定模型值，从而简化了这一过程。 http://www.primefaces.org/primeng/#/radiobutton

收音机，复选框和选择/选项以角度2绑定

3 个答案: