代码之家 › 专栏 › 技术社区 › Anand

单选按钮ngModelChange未启动

angular-forms kendo-ui-angular2 angular

Anand · 技术社区 · 7 年前

这应该是基本的,与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>

在component类中,我有。。。

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}

2 回复 | 直到 7 年前

cseils 7 年前

您需要将ngModel绑定更新为双向。因此,将[ngModel]替换为[(ngModel)]

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

这样,一旦选择单选按钮,就会调用filterPositionType

Anand 7 年前

这就是工作原理-关键是在输入和标签之间保持这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>

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前