3

效果如何ngModelChange()？

(ngModelChange) 是ngModel指令的@Output。它在模型更改时触发。你不能在没有ngModel指令的情况下使用这个事件

但我不确定（ngModelChange）它是如何工作的，如果我使用ngModelChange()事件，即使我没有向ngModel.

<input #gb type="text" pInputText class="ui-widget ui-text" **ngModel**  
 (ngModelChange)="functionName($event)">
4

3 回答 3

7

是的，ngModelChange() 无需向 ngModel 提供模型名称即可工作。

发生这种情况的原因，(ngModelChange) 是 ngModel 指令的 @Output。当在输入中插入某个值时，emitEvent 变为 true，默认为 false（因此它不会在初始时间触发页面加载）。

_this.updateValueAndValidity({ emitEvent: false });

您可以在 \@angular\forms\esm5\forms.js 找到 ► 第 3850 行

如果emitEvent是true，则此更改将导致发出valueChanges事件FormControl。这默认为 true （因为它下降到updateValueAndValidity）。

如果emitViewToModelChange是true，将触发 ngModelChange 事件来更新模型。emitViewToModelChange如果未指定，这是默认行为。

如果emitModelToViewChange是true，视图将通过事件通知新值onChange。

现在的问题是，为什么在 $event 中获得相同的值，它被插入到 input 而不是ture，这导致

FormControl.prototype.setValue = /**

function (value, options) {
        var _this = this;
        if (options === void 0) { options = {}; }
        (/** @type {?} */ (this)).value = this._pendingValue = value;
        if (this._onChange.length && options.emitModelToViewChange !== false) {
            this._onChange.forEach(function (changeFn) { return changeFn(_this.value, options.emitViewToModelChange !== false); });
        }
        this.updateValueAndValidity(options);
    };

相同的文件行号 3911 到 3919

于 2018-02-24T06:40:35.563 回答
4

在源代码 ngModelChange中只是一个事件发射器。

  @Output('ngModelChange') update = new EventEmitter();

它在执行 viewToModelUpdate 函数时触发。

viewToModelUpdate(newValue: any): void {
  this.viewModel = newValue;
  this.update.emit(newValue);
}

ngModel可以是任何东西，并且没有与其他任何东西的直接链接。在代码中它被声明并且它只在一个名为的函数中使用ngOnChanges

@Input('ngModel') model: any;

ngOnChanges(changes: SimpleChanges) {
  this._checkForErrors();
  if (!this._registered) this._setUpControl();
  if ('isDisabled' in changes) {
    this._updateDisabled(changes);
  }

  if (isPropertyUpdated(changes, this.viewModel)) {
    this._updateValue(this.model);
    this.viewModel = this.model;
  }
}

我在这里可能是错的，但在我看来，这ngModel不是唯一的事实来源，但this.viewModel似乎是，因为ngModel它不需要一个值ngModelChange来工作，因为它与值分开ngModel。

希望这可以帮助。

于 2018-02-13T15:01:57.870 回答
4

你在没有 ngModel 的情况下试试

<select (change)="changed($event)">
     <option *ngFor="let data of allData" [value]="data.id">
           {{data.name}}
       </option>
</select>

changed(e){
   //event comes as parameter and then find data manually
   //by using e.target.data

}

              OR BY ID

 <inputtype="text" #byid (change)="onChange(byid.value)" />
  onChange(title:string){
   alert(title);
   }

您可以通过将 id 传递给输入来尝试

于 2018-02-22T10:07:42.653 回答