Angular - Как связать изменения HTML с переменной при манипулировании массивом

Question

Я хочу сделать элемент выделения, указав модель массива.Однако он не привязывается к элементу выделения html, когда я изменяю (только толкаю или склеиваю) модель массива.Я сделал два сэмпла и добавил на стекблиц.Пожалуйста, проверьте и решите мою проблему:)

HTML:
<select multiple [(ngModel)]="selected">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<button (click)="push()">
  Push
</button>

TS:
selected = ['A', 'B'];
push() {
    this.selected.push('C');
}

образцы

Answer 1

Когда вы помещаете элемент в массив, ссылка на массив не изменяется, и angular не знает, что он был изменен, одно решение - каждый раз создавать новый массив с одинаковыми элементами this.array = [...this.array], что не так сложно см. ниже код, который решает вашу проблему

push() {
    this.selected.push('C');
    this.selected = [...this.selected];
    this.test.push({ name: 'hgf' })
    this.test = [...this.test];
  }
  splice() {
    this.selected.splice(0, 1);
    this.selected = [...this.selected];
    this.test.splice(0, 1);
    this.test = [...this.test];
  }

Обновлено stackblitz