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