单选按钮 ngModelChange 未触发

Question

这应该是基本的，与 kendoUI 没有直接关系，但考虑到我对 Angular 还是个新手，需要一些帮助才能解决这个问题。我正在尝试对单选按钮进行数据绑定，但因为我必须进行特殊处理，所以我必须将数据和事件部分分开。事件处理程序未被调用。我确实导入了 FormsModule。

<div class="col col-lg-11">
<form #positionTypeForm = "ngForm">
  <div kendoRippleContainer>
    <span *ngFor="let positionType of positionTypeChoices" >
        <input type="radio" id="{{office}}" name="positionTypeRadio" class="k-radio" [value] = "positionType" [ngModel] = "positionTypeFilter" (ngModelChange)="filterPositionType($event, positionType)"/>
        <label class="k-radio-label" for="allRadio">&nbsp;{{positionType}}&emsp;&emsp;&emsp;</label>
    </span>
  </div>
</form>
</div>

在组件 class 我有 ...

public positionTypeChoices: Array<string> = ['Long', 'Short', 'All']; // grid filtering is case insensitive
public positionTypeFilter = 'All'; //  initial value
public filterPositionType(event: any, positionType: string) { // ... event handing}

Answer 1

您需要将 ngModel 绑定更新为 2 种方式。所以用 [(ngModel)]

替换 [ngModel]

<input type="radio" id="{{office}}" name="positionTypeRadio" class="k-radio" [value] = "positionType" [(ngModel)] = "positionTypeFilter" (ngModelChange)="filterPositionType($event, positionType)"/>

这样，一旦您select一个单选按钮

，就会调用 filterPositionType

Answer 2

这是有效的 - 关键是要在输入和标签之间保持这两个相同 id="type-{{i}}" for="type-{{i}}"

                          <form #positionTypeForm = "ngForm">
                            <div kendoRippleContainer>
                              <span *ngFor="let positionType of positionTypeChoices; let i = index;" >
                                  <input type="radio" id="type-{{i}}" name="positionTypeRadio" class="k-radio" [value] = "positionType" [ngModel] = "positionTypeFilter" (ngModelChange)="filterPositionType($event, positionType)"/>
                                  <label class="k-radio-label" for="type-{{i}}">&nbsp;{{positionType}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                              </span>
                            </div>
                          </form>

单选按钮 ngModelChange 未触发

Radio button ngModelChange not firing

angular

kendo-ui-angular2

angular-forms