Как проверить изменения с пайпами? Угловая текстовая область
У меня есть текстовая область с отформатированным 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.info(this.data)
}
HTML
<text area (ngModelChange) = "saveUserChanges()">{{data | json}}</textarea>
<button (click) = "saveUserChanges()">save</button>
Как использовать [(ngModel)] с трубкой: | json
Зачем тебе JsonPipe? Оказывается, data — это String.
Это нужно для того, чтобы красиво отформатировать его после того, как я его проанализирую.
Вы можете внедрить свой канал в класс компонента и вызвать для него .transform, чтобы отформатировать json внутри класса компонента.
как так @vinaayakh?
Возможный дубликат Использование каналов в ngModel для элементов INPUT в Angular
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете связать значение с помощью [ngModel] и установить новое значение с помощью (ngModelChange):
<textarea [ngModel] = "data | json" (ngModelChange) = "saveUserChanges($event)"></textarea>
В классе компонентов saveUserChanges определяется как:
saveUserChanges(value) {
this.data = JSON.parse(value);
}
См. этот стекблиц для демонстрации.
Это
(ngModelChange)(обработчик событий), а не[(ngModelChange)](привязка). А поскольку[(ngModel)]текстовой области не привязан к значению, событиеngModelChangeне будет сгенерировано при изменении содержимого.