Angular：重置数组而不在 Ui 中重新加载视图答案

【问题标题】：Angular: Reset Array without reloading view in UiAngular：重置数组而不在 Ui 中重新加载视图
【发布时间】：2020-05-05 00:24:09
【问题描述】：

我目前有以下html代码：

<ng-container *ngFor="let goal of goalList;>
  <tab>
    <h3 class="...">{{goal?.title}}</h3>
    <p class="...">{{goal?.description}}</p>
  </tab>
</ng-container>

我需要有空的“目标”对象，以便选项卡的 ngFor 起作用。所以在组件中我像这样初始化goalList数组：this.goalList = Array(goalCount) // as I know the count already。

稍后，一旦请求，我将使用 Observable 从后端加载goalList，并用服务器的结果替换“空”数组：

this.serviceExample.goalListObservable.subscribe(
  data => this.goalList = data
));

不幸的是，当前值会消失，因为后面的数组会被覆盖。

是否可以更改组件中的数组以使 Ui 中的值自动刷新？

【问题讨论】：

标签： angular typescript

【解决方案1】：

您可以创建另一个数组并将来自 observable 的答案保存在该数组中。

this.serviceExample.goalListObservable.subscribe(
  data => this.newArray = data
));

在前端，你使用你已经为 ngFor 设置的数组，以及你从第二个数组中获取的数据：

<ng-container *ngFor="let goal of goalList; let i = index" [attr.data-index]="i">
  <tab>
    <ng-container *ngIf="newArray">
      <h3 class="...">{{newArray[i]?.title}}</h3>
      <p class="...">{{newArray[i]?.description}}</p>
    </ng-container>
  </tab>
</ng-container>

【讨论】：

效果很好！！谢谢你:)