Question

修改

我想要的是一组单选按钮，选择一个单选按钮选择另一个单选按钮; 尝试选择（通过点击它），“CLICKED”（未选中）单选按钮永远不会被选中，其默认行为是“点击”无线电获得“SELECTED”。类似于this Angular 2 demo。

但是这个演示并不是我想要的，因为它在选择另一个无线电时有延迟。

Here is the demo with jQuery.这没有延迟，单击单选按钮将从不检查该单选按钮。例如，单击第二个单选按钮从不选择第二个单选按钮。要选择第二个单选按钮，您需要单击第一个单选按钮。

OLD：我想用Angular 2做的是我有3个无线电元素A，B和C，其中有2个，可以选择A和B，当第三个，C，得到选择它应该选择B.所以，C永远不会在视觉上被选中，或者在瞬间被选中。

我无法完成这项工作。所以我想重新创建问题但更简单是一个好主意，所以我试图解决这个更容易的问题。我可以这样选择A选择B，选择B选择C，然后选择C选择A.

A是第一个单选按钮，B是第二个，C是第三个单选按钮。

onRadioChange(val) {
    val = val == 2 ? 0 : ++val;
    this.radio_val=val;
}

Here is the plunker demo

但是，正如您在演示中所看到的，它只适用于第一次点击。因此，单击B将选择C，但单击B AGAIN将选择B.

我认为这是主要问题。

以上演示使用[（ngModel）]，但[checked]也是如此。

Here is the demo with checked

但是，使用setTimeout和[（ngModel）]执行此操作

Here is what I want to do but without delays

这与Angular2的Lifecycle Hooks有关吗？

请帮忙。

Answer 1

单击事件：设置单选按钮的模型值。更改事件：为该更改调用click事件事件将重写模型值。

<input type='radio' name='test' [value]='0' [(ngModel)]='radio_val' (change)='onRadioChange(0) '(click)='onRadioClick(0)'>
<input type='radio' name='test' [value]='1' [(ngModel)]='radio_val' (change)='onRadioChange(1) (click)='onRadioClick(1)'>
<input type='radio' name='test' [value]='2' [(ngModel)]='radio_val' (change)='onRadioChange(2) (click)='onRadioClick(2)'>

<强>更新

在angular2的救生圈中，radionbutton的变化事件发生在点击事件之后。同样对于我们想要的，我们必须使用settimeout让angular2重新发送视图以便在change事件中进行更改。

plunker demo here。

Answer 2

我认为你必须在(click)上这样做。在(change)上无法处理所有情况，因为单击所选按钮时不会发生任何更改，因此不会发出任何更改事件。我会使用[checked]来控制哪一个boolean，并且事实证明它更容易。所以试试，

(click)='onRadioChange(...)'而不是(change)并添加[checked]='checked[...]'必要的代码以将按钮绑定到checked:boolean[];。

<强> Working Plunkr ：我冒昧地每次点击都进行更改

Answer 3

这应该适合你：

onRadioChange(val) {
  this.radio_val = (this.radio_val+1) %3;
}

而不是使用change事件，请加入click事件。

Demo

Answer 4

我指的是这篇Angular 2文档：Lifecycle Hooks

根据文件，

Angular的单向数据流规则禁止在编写视图后对视图进行更新。组件的视图组合后，这两个钩子都会触发。

然后

// Wait a tick because the component's view has already been checked
this.logger.tick_then(() => this.comment = c);

因此this demo将毫秒参数设置为0.但不会跳过将单选按钮设置为＆＃39;已选中＆＃39;像this jQuery demo那样。

Answer 5

      // html
       <ion-card *ngFor="let val of addressList;">
                    <ion-card-content (click)='onSelectionChange(val)'>
                        <ion-row>
                            <ion-col size="2">
                                <input type="checkbox" class="selectBox" [checked]="val._id === selectedEntry._id"  [value]="val._id"  (change)='onSelectionChange(val)' >
                            </ion-col>
                            <ion-col size="8">
                                {{val.area}} ,{{val.city}}<br>
                                {{val.nearBy}}<br>
                                {{val.city}} , {{val.state}} ,{{val.pincode}},
                                {{val.country}}
                            </ion-col>
                        </ion-row>
                    </ion-card-content>
                </ion-card>

    // component
         public addressList: any;
        public selectedEntry: any = {
            _id: ""
          }

  ngOnInit() {
    this.getAddress();
  }

  getAddress() {
    this._ProductService.getAddress(localStorage.getItem('userId')).subscribe((data: any) => {
      this.addressList = data;
      console.log(this.addressList)
    });
  }


         onSelectionChange(entry) {
            this.selectedEntry = Object.assign({}, this.selectedEntry, entry);
            console.log(this.selectedEntry, "select")

          }

Angular 2动态更改选定的单选按钮

5 个答案: