Question

我有以下代码：

set dynamicData(val) {
        this.editableData.emit(val);
}

get dynamicData() {
    return this.formsData;
}

如果我从我的组件中设置dynamicData值，则会触发setter。但是，如果我使用dynamicData从输入设置[(ngModel)]，dynamicData的实际值会发生变化，但由于某种原因不会触发设置器。

这是输入：

<input type="text" name="dynamicDataSender"
                   *ngIf="someCondition"
                   [(ngModel)]="dynamicData.sender"/>

我错过了什么吗？

Answer 1

您引用[(ngModel)]="dynamicData.sender"而不是dynamicData。你应该引用这个对象。

如果dynamicData需要是一个事件发射器，那么你不应该将它用作属性绑定，而是使用(onChange)="modelChanged($event)"处理程序，您可以在其中向dynamicData发出新值。（modelChanged(value){this.dynamicData.emit(value);}）并使用其他属性作为ngModel。

Answer 2

[(ngModel)]语法只能设置数据绑定属性。如果您需要做更多或不同的事情，可以编写扩展表格。

 <input type="text" name="dynamicDataSender" #ref
   *ngIf="someCondition"  [ngModel]="dynamicData.sender" (ngModelChange)="dynamicData(ref.value)"/>

ngModel数据属性设置元素的值属性，ngModelChange事件属性侦听元素值的更改
ngModelChange会在你需要去抖动值的每次击键时被触发，否则每次按键都会发出事件。要去抖动值，你可以使用Subject。 subject是observable和observer。这意味着您可以将其视为可观察对象并将值传递给它。

debouncer= new Subject();
  constructor() {


   this. debouncer
    .debounceTime(1000)
    .subscribe((val) =>{ 
      console.log(val);
      this.editableData.emit(val);

    });
  }

set dynamicData(val) {
         this.debouncer.next(value);
}

当对象通过ngModel更改时，不会触发Setter

2 个答案: