angular - 即使没有从 ngModelChange.emit() 触发，也会在按键上调用 ngModelChange

Question

我正在尝试调用 ngModelChange 事件，但仅当我调用它时才使用

this.ngModelChange.emit(data)

现在，每当我按下键盘上的某个键以及使用上一个命令调用它时，它都会被调用。为什么？

我有一个组件“Feild”，我在其中根据传递的类型属性创建不同类型的输入。其中之一是我在 JQuery 中创建的自动完成组件。为了让它与 Angular 一起工作，我创建了一个组件来将值传递给它。

字段组件:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'field',
  template: `<div class="field">
                <div class="fieldTitle" *ngIf="text">{{text}}</div>
                <div class="fieldValue" *ngIf="type">
                    <input *ngIf="type == 'text'" type="text" [ngModel]="ngModel" (ngModelChange)="onChange($event)" [name]="name" ngDefaultControl/>
                    <autocomplete *ngIf="type == 'autocomplete'" [link]="link" [mapping]="mapping" [ngModel]="ngModel" (ngModelChange)="onChange($event)" [name]="name" ngDefaultControl></autocomplete>
                </div>
            </div>`
})
export class Field{
    @Input() text: string;
    @Input() type: string;
    @Input() ngModel: any;
    @Input() name: string;
    @Input() mapping: string;
    @Input() link: string;

    @Output() ngModelChange = new EventEmitter();

    constructor(){

    }

    onChange(e){
        this.ngModel = e;
        this.ngModelChange.emit(e);
    }
}

自动完成组件:

import { Component, Input, ViewChild, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'autocomplete',
  template: `<div #autocomplete class='autoComplete'></div>`
})
export class AutoComplete{
    @Input() ngModel: any;
    @Input() link: string;
    @Input() mapping: string;

    @ViewChild('autocomplete') content: any;

    @Output() ngModelChange = new EventEmitter();
    @Output() select = new EventEmitter();

    constructor(){

    }
    ngAfterViewInit(){
        var ctrl = this;
        var options = {
            link: this.link,
            mapping: this.mapping,
            data: this.ngModel,

            onSelect: function(data: any){
                ctrl.ngModel = data;
                ctrl.ngModelChange.emit(data);
                ctrl.select.emit({data: data});
            },
            setData: function(e : any){
                ctrl.ngModel = e;
                ctrl.ngModelChange.emit(e);
            }
        }

        for(var key in options) {
            if(options[key] === undefined){
                delete options[key];
            }
        }

        $(this.content.nativeElement).autoComplete(options);
    }
}

我的自动完成生成一个带有其他一些 div 和样式的输入。当我在里面输入内容时，它会过滤数据列表并仅显示那些对输入中的字符串进行数学运算的数据。当我点击一个结果时，它会将数据设置为我点击的结果。在每次按键时，它都会调用 setData(undefined) 来删除数据，在单击事件时，它会调用函数 onSelect(data)。那部分工作得很好。

不起作用的是，在自动完成组件的函数 setData() 之前，Field 组件的 onChange() 函数在每次击键时都被调用，输入字符串中的值。如何删除不需要的 onChange() 调用？

提前致谢

你可以去 plunker 查看一个例子:https://plnkr.co/edit/jAVIupQ2R1Vm1y9YHoLI?p=preview

如果您查看控制台，您将看到字符串和未定义。该字符串与输入中的相同，未定义自动完成返回的内容。 undefined 很好，但不是字符串。我花了一段时间才让它起作用。事实证明，只要您导入 FormsModule，就会发生这种情况。我需要 FormsModule，因为我使用其他类型的与 NgModel 一起工作的输入。

Answer 1

首先:

不要使用像 ngModelChange 或 ngModel 这样的保留 Angular 词。

似乎会导致意想不到的行为!!

第二:

您的自动完成 工作不正常，它不会设置当前值。

修复它:

obj.search = function (reinitialize) {
   obj.options.data = obj.input[0].value; // NEW !!
      if (reinitialize === true) {
         //obj.options.data = undefined; // ?!?!?!? WHY ??

这是一个工作演示:https://plnkr.co/edit/2H0GRSp3ktJWoMSWDe7S?p=preview

第三:

实现正确的 ngModel 支持会更好。您必须实现 ControlValueAccessor，如下所述:

https://stackoverflow.com/a/41935754/3631348