Question

我使用Angular2，并且有html代码

<div class="row">
        <div class="col-xs-3 form-group">
            <select class="form-control"
                    id="country"
                    [(ngModel)]="testSelectModel"
                    (change)="testSelectChange($event)">
                <option *ngFor="let item of textCollection"
                        [value]="item.id">
                    {{item.name}}
                </option>
            </select>
        </div>
        <div class="col-xs-3 form-group">
            <input type="text"
                   class="form-control"
                   [(ngModel)]="testSelectModel"/>
        </div>
    </div>

我还有一个textCollection的集合，其中的对象是 - { 名称：'foo'， id：1 } ... 我在输入1中输入（id），并希望在标签选择中看到所选项目。是的，一切都很好，项目已更改，但事件“testSelectChange” - 未被调用..

example

有人面对这样吗？

Answer 1

模型中句柄更改的事件为ngModelChange，您的代码应如下所示：

<div class="row">
        <div class="col-xs-3 form-group">
            <select class="form-control"
                    id="country"
                    [(ngModel)]="testSelectModel"
                    (ngModelChange)="testSelectChange($event)">
                <option *ngFor="let item of textCollection"
                        [value]="item.id">
                    {{item.name}}
                </option>
            </select>
        </div>
        <div class="col-xs-3 form-group">
            <input type="text"
                   class="form-control"
                   [(ngModel)]="testSelectModel"/>
        </div>
    </div>

这是Plunker享受的一个例子。

Answer 2

除了其他评论者所说的内容之外，您可能还需要在Future中编写处理程序，因为testSelectMhal的更改可能在testSelectChange（$ event）发生之前没有生效。

Angular1就是这种情况。

Answer 3

这应该有效： Plunker Code

HTML：

    <select class="form-control" #type [(ngModel)]="testSelectModel" (change)='testSelectChange(type.value)'>
      <option *ngFor="#item of textCollection" [value]="item.id">
        {{item.name}}
      </option>
    </select>

类：

testSelectChange(val: string) {
  console.log('I call', val);
  this.resultWorkModel = this.textCollection.find((obj) => obj.id == val).name;

}

Answer 4

如果修改输入，testSelectChange()将不会被调用，即使select DOM元素和input DOM元素都绑定到同一个组件属性， testSelectModel。如果testSelectChanges()的DOM属性之一发生了更改，Angular将仅调用select，而当您更改input值时，这不会发生。< / p>

我建议为每个绑定分解事件和数据绑定 - 使用[ngModel]和(ngModelChange)：

<select [ngModel]="testSelectModel" 
        (ngModelChange)="testSelectChange($event)">
...
<input [ngModel]="testSelectModel"
       (ngModelChange)="testInputChange($event)">

请注意，$event将设置为选择或输入的当前值。

然后从testInputChange()手动调用select change事件处理程序：

testSelectChange(newValue) {
    console.log('testSelectChange', newValue);
    this.testSelectModel = newValue;
    this.resultWorkModel = newValue;
}
testInputChange(newValue) {
  console.log('testInputChange', newValue)
  this.testSelectModel = newValue;
  this.testSelectChange(newValue);  // manually trigger other event handler
}

Plunker

更改ngModel后，如何在选择中使更改事件生效

example

4 个答案: