Angular-操纵阵列时，如何结合从变量的HTML变化

Question

我想通过提供数组模型来制作选择元素。但是，当我更改(仅推或拼接(数组模型时，它不会与HTML选择元素结合。我制作了两个样本，并在Stackblitz上添加。请检查并解决我的问题：(

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