如何检查管道的变化？角文本区域答案

【问题标题】：How to check for changes with pipes? Angular text area如何检查管道的变化？角文本区域
【发布时间】：2019-09-01 06:37:24
【问题描述】：

我有一个带有格式化 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>

【问题讨论】：

它是 (ngModelChange)（事件处理程序）而不是 [(ngModelChange)]（绑定）。并且由于文本区域的[(ngModel)]没有绑定值，所以当内容发生变化时不会触发ngModelChange事件。
如何将[(ngModel)] 与管道一起使用：| json
为什么需要JsonPipe？看来data 是String。
那是在我解析后很好地格式化它
您可以将您的管道注入到组件类中，并在其上调用 .transform 来格式化组件类中的 json

【解决方案1】：

您可以将值与[ngModel] 绑定并使用(ngModelChange) 设置新值：

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

在组件类中，saveUserChanges定义为：

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

请参阅this stackblitz 以获取演示。

【讨论】：