Angular2: обновить вид после отмены изменений в текстовом вводе

Question

У меня есть массив текстовых областей, которые могут обновляться индивидуально, а изменения могут быть сохранены или удалены. Каждая текстовая область представлена ​​объектом, чтобы отслеживать изменения и включать / отключать некоторые кнопки. Все работает нормально, но после сброса объект не меняется, но вид не обновляется. Он обновляется только тогда, когда я что-то изменяю внутри объекта, поэтому я попытался сделать «настоящую» копию объекта и присвоить эти значения реальному объекту, но это также не работает. Мой код пока:

HTML:

   <ng-container *ngFor="let itemId of itemIds">
  <div>
        <div>
            <textarea #message (keydown)="enableButton(itemId)" rows="5" cols="50"[(value)]="getMessageDetails(itemId).message"></textarea>
        </div>
    </div>
    <div>
        <button [disabled]="!getMessageDetails(itemId).changedText" (click)="saveMessageChanges(itemId, message.value)">Save Changes</button>
        <button [disabled]="!getMessageDetails(itemId).changedText" (click)="discardChanges(itemId)">Discard Changes</button>
    </div>
</ng-container>

Компонент:

    itemIds = [2,4];

  myMessages = [
    {
      id: 2,
      message: 'hello',
      changedText: false
    },
    {
      id: 4,
      message: 'world',
      changedText: false
    }
  ]

enableButton(itemId){
    this.myMessages.map( y => {if (y.id === itemId) {
      y.changedText = true;
    }});
  }

getMessageDetails(itemId){
    let myMessage = this.myMessages.find(y => y.id === itemId);
    return myMessage;
  }

saveMessageChanges(itemId, message){
    this.myMessages.map( y => {if (y.id === itemId) {
      y.message = message;
      y.changedText = false;
    }});
  }
discardChanges(itemId){
    let tempMessage = Object.assign({},(this.myMessages.find(y => y.id === itemId)));

    let myMessage = this.myMessages.find(y => y.id === itemId);

    myMessage.changedText = false;
    myMessage.message =  tempMessage.message; // <- no object change detected
    //myMessage.message = " " + tempMessage.message; // <- this works
    return myMessage;
  }

Всякий раз, когда я добавляю пробел в сообщение, оно будет работать.

Я создал стек стлиц здесь: https://stackblitz.com/edit/angular-m5dbj4

Answer 1

Изменений не обнаружено, потому что на самом деле в списке нет изменений myMessages. Если вы добавите {{myMessages | json }} в ваш HTML и вставите текст в текстовую область, вы увидите, что содержимое списка не меняется. В discardChanges вы просто снова назначаете «hello» переменной, которая уже содержит строку «hello». Так что без изменений. Если вы добавите пробел к сообщению в discardChanges (как вы описали), вы фактически измените значение с «hello» на «hello» -> значение изменилось.

Однако вы можете преодолеть эту проблему, удерживая «предыдущий» список, чтобы отслеживать исходные записи вашего списка и использование ngModel.

Изменить текстовую область на

<textarea #message (keydown)="enableButton(itemId)" rows="5" cols="50" [(ngModel)]="getMessageDetails(itemId).message"></textarea>

И ваш компонент:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit { 
  itemIds = [2,4];
  myMessages = [
    {
      id: 2,
      message: 'hello',
      changedText: false
    },
    {
      id: 4,
      message: 'world',
      changedText: false
    }
  ]

  previous = []

  ngOnInit() {
    this.previous = this.getDeepCopy(this.myMessages);
  }

  saveMessageChanges(itemId, message){
    this.myMessages.map( y => {if (y.id === itemId) {
      y.message = message;
      y.changedText = false;
    }});

    this.previous = this.getDeepCopy(this.myMessages);
  }

  discardChanges(itemId){
    this.myMessages = this.getDeepCopy(this.previous);
    let myMessage = this.myMessages.find(y => y.id === itemId);

    return myMessage;

  }

  getDeepCopy( list ) {
    return list.map(x => Object.assign({}, x));
  }
}

Я избегал некоторых методов в компоненте, потому что они не относятся к этому примеру. Просто назначьте глубокую копию переменной previous в ngOnInit, а также сделайте это, если вы нажмете сохранить. Если вы хотите отменить изменения, вы переназначаете глубокую копию списка previous снова на myMessages.

С этим ваш вид обновляется, потому что теперь происходит изменение значения переменной.