javascript - 通过 ngModel 更改对象时不会触发 Setter

Question

我有以下代码:

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

get dynamicData() {
    return this.formsData;
}

如果我从我的组件设置 dynamicData 值，则会触发 setter。 但是，如果我使用 [(ngModel)] 从输入中设置 dynamicData，dynamicData 的实际值会更改，但某些 setter 不会被触发原因。

这是输入:

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

我错过了什么吗？

Answer 1

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

 <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);
}