javascript - Angular:* ngFor在数组更改后不更新 View

Question

我正在使用 Angular 制作一个网络应用程序，但是我在使用加载按钮时遇到了问题。因此，用户按下加载按钮，选择要加载的保存，然后将一组新属性加载到表单中，每个表单构成步进器中的一个步骤项。使用此函数“重置”加载所有表单的表单数组:

private resetPropForms(): void {
  this.propForms = [];
}

这是接收属性事件作为参数然后设置表单数组的函数:

onPropertiesEmitted(properties: Property[]): void {
  this.resetPropForms();
  this.resetDividedProperties();
  this.resetUndividedProperties();
  this.setDividedProperties( properties );
  this.setForms();
  this.setUndividedProperties( properties );
}

这是我的模板的样子:

<se-stepper
    *ngIf="undividedProperties"
    [linearMode]="false"
    [(activeStepIndex)]="activeStepIndex"
  >
    <se-step-item
        *ngFor="let form of propForms"
    >
        <app-properties-form
            [propertiesForm]="form"
            (change)="onPropertiesChanged($event)"
        >
        </app-properties-form>
    </se-step-item>

  </se-stepper>

最后， View 已更新，但只有在我进入下一步并返回后才会更新。如果我保存属性，那么即使 View 中显示的值不正确/未更新，正确的值也会发送到后端。任何想法为什么会这样。我尝试将 trackBy 与每个表单的唯一标识符一起使用(使用随机数)，但这没有用。我尝试使用 ChangesRef 和 detectChanges() 但没有用。当我省略 *ngFor 并仅显示数组中的第一个表单时，它会正确更新，这让我相信这个问题与 *ngFor 有关。

编辑:我很确定放在 onPropertiesEmitted() 中的 setTimeout() 有效，但我忘记了我把它放在哪里以使其有效，它似乎不是解决问题的好方法

Answer 1

我认为问题在于数组是相同的并且更改检测不会检测到更改，试试这个

private resetPropForms(): void {
  //this.propForms = [];

  //array.slice() returns new array
  this.propForms = this.propForms.slice(0,0);
}

您还可以在分配新属性之前重置表单 ( form.reset() )