Блог

Главная - Вопросы по программированию - Как проверить наличие изменений с помощью каналов? Угловая текстовая область

Как проверить наличие изменений с помощью каналов? Угловая текстовая область

#javascript #html #json #angular

#javascript #HTML #json #angular

Вопрос:

У меня есть текстовая область с форматированным 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>

Комментарии:

1. Это (ngModelChange) (обработчик событий), а не [(ngModelChange)] (привязка). И поскольку текстовая область [(ngModel)] не привязана к значению, ngModelChange событие не будет выдано при изменении содержимого.

2. Как мне использовать [(ngModel)] с каналом: | json

3. Зачем вам это нужно JsonPipe ? Похоже, что data это String .

4. Это для того, чтобы отформатировать его красиво, как только я его проанализирую

5. Вы можете внедрить свой канал в класс компонента и вызвать. преобразуйте ее для форматирования json внутри класса component

Ответ №1:

Вы можете связать значение с [ngModel] и установить новое значение с помощью (ngModelChange) :

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

В классе component saveUserChanges определяется как:

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

Смотрите Демонстрацию в этом стекблите.