Angular不会更新数组ngModel上的UI更改

Question

我的` width: 70vw; height: 80vh; max-width: 1920px; max-height: 1080px; left: 50%; border: 2px solid black` 与<select>中的myArray双向绑定。我想根据对MyComponent的asyc调用来操纵myArray的内容。当我将新数据推送到service时，更新将不会反映在选择中。如果我使用数据实例化数组。

为什么会这样，我怎样才能推送而不是实例化数组呢？

myArray

Answer 1

正如您所说，角度变化检测基于对数组的引用而忽略了内容。

使用附加元素创建新数组的一种简单方法是：

this.myArray =  [...this.myArray, this.doSomething(data)];

Answer 2

在异步服务填充myArray之前，可能会呈现视图。

如果在select元素中放入* ngIf子句，会发生什么？

<select *ngIf=(myArray) multiple name="myArray" ngModel [(ngModel)]="myArray" >
    <option *ngFor="let a of ..." [ngValue]="...">...</option>  
</select>

您还可以尝试创建一个在异步服务响应时更新myArray的新功能。这可能会让您了解执行顺序。