javascript - 如何检查管道的变化？ Angular 文本区域

Question

我有一个带有格式化 json 的文本区域。允许用户在该文本区域中进行更改。但是由于 json 管道，我不能使用 [(ngmodel)}。此外 (change) 和 (ngModelChange) 似乎没有触发任何东西。如何捕获用户更改？

data: string = '{"a":1,"b":2,"c":{"d":3, "e":4}}';

ngOninit(){
this.data= JSON.parse(this.data);
}

 saveUserChanges(){
 console.log(this.data)
}

HTML

<text area (ngModelChange)="saveUserChanges()">{{data | json}}</textarea>
<button (click)="saveUserChanges()">save</button>

Answer 1

您可以使用 [ngModel] 绑定(bind)值并使用 (ngModelChange) 设置新值:

<textarea [ngModel]="data | json" (ngModelChange)="saveUserChanges($event)"></textarea>

在组件类中，saveUserChanges定义为:

saveUserChanges(value) {
  this.data = JSON.parse(value);
}

参见 this stackblitz用于演示。