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>

在组件类中我有......

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]

Transactions

这样，一旦选择单选按钮

，就会调用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未触发

2 个答案: