Question

我正在使用Angular制作一个Web应用程序，但是在加载按钮上遇到了麻烦。因此，用户按下加载按钮，选择要保存的保存，然后将一组新的属性加载到表单中，每个表单构成步进器中的一个步进项。可以使用以下功能“重置”加载所有表单的表单数组：

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>

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

编辑：我很确定将setTimeout（）放在onPropertiesEmitted（）中可以工作，但是我忘记了放置它的位置以使其起作用，这似乎不是解决问题的好方法

Answer 1

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

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

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

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

角度：* ng用于在数组更改后不更新视图

1 个答案: