Question

我有一个收集用户信息的表格。其中一个控件可能是使用标准选项和ngFor进行的标准选择，可能是我目前关注的错误。错误显示为

ExpressionChangedAfterItHasBeenCheckedError：表达式已更改经过检查后。以前的值：'ng-pristine：true'。当前值：“ ng-pristine：false”

在Google搜索中，这似乎是一个标志，当旧的检查值与新的检查值不同时，角度跳闸。错误指向与以下选择有关的模板行：

<select class="written" required formControlName="addressState">
  <option *ngFor="let state of states" value="{{state.id}}">{{state.name}}</option>
</select>

状态是组件上的静态属性，在我所知的任何时候都不会更改。此选择嵌套在formGroup中。删除formGroup或formControlName会删除错误。

application.component.html *删除了与错误无关的模板代码

<form class="content-centered" [formGroup]="autoApplicationForm">
<sptr-slides class="centered-content" #slider>
    ...
    <sptr-slide [slideName]="'address'">
        <div class="column">
            <div class="row">
                <label>What is your address?</label>
            </div>
            <div class="column">
                <div class="row">
                    <label class="small">street:</label>
                </div>
                <div class="row">
                    <label class="small">city:</label>
                </div>
                <div class="row">
                    <label class="small">state:</label>
                </div>
                <div class="row">
                    <label class="small">zip:</label>
                </div>
            </div>
            <div class="column">
                <div class="row">
                    <input class="written" type="text" data-validate="streetaddress"
                        required formControlName="addressStreet" />
                </div>
                <div class="row">
                    <input class="written" type="text" name="address_city" data-validate="alpha"
                        required formControlName="addressCity" />
                </div>
                <div class="row">
                    <select class="written" name="address_state_id" required formControlName="addressState">
                        <option *ngFor="let state of states" value="{{state.id}}">{{state.name}}</option>
                    </select>
                </div>
                <div class="row">
                    <input class="written" type="text" data-validate="zipcodedom" required formControlName="addressPostal" />
                </div>
            </div>
        </div>
        <div class="row slide-navigation">
            <sptr-nav-button [target]="'back'">Back</sptr-nav-button>
            <sptr-nav-button class="forward" [target]="'forward'">Forward</sptr-nav-button>
        </div>
    </sptr-slide>
    ...
</sptr-slides>

application.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { SpotterWheelSelectComponent } from '@components/spotter-wheel-select/spotter-wheel-select.component';
import { SlidesComponent } from '@components/slides/slides.component';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  templateUrl: './applicationauto.component.html',
  styleUrls: ['./applicationauto.component.sass']
})
export class ApplicationAutoComponent implements AfterViewInit {

  public states = [{id: 0, name: 'Alabama'}, {id: 1, name: 'Alaska'}, {id: 2, name: 'Arkansas'}];

  @ViewChild('slider', {read: SlidesComponent, static: true}) sliderComponent: SlidesComponent;
  @ViewChild('slidesSelect', {read: SpotterWheelSelectComponent, static: true}) slideSelectComponent: SpotterWheelSelectComponent;

  autoApplicationForm = new FormGroup({
    nameFirst: new FormControl(),
    nameLast: new FormControl(),
    email: new FormControl(),
    phone: new FormControl(),
    deductible: new FormControl(),
    addressStreet: new FormControl(),
    addressCity: new FormControl(),
    addressState: new FormControl(),
    addressPostal: new FormControl(),
  });

  constructor() { }

  ngAfterViewInit() {
    this.slideSelectComponent.valuechange.subscribe((a) => {
      this.sliderComponent.setSlide(a.value);
    });
    this.sliderComponent.slideevent.subscribe((name: string) => {
      this.slideSelectComponent.select(name);
    });
  }

  public changeSlide(value) {
    console.log('move slide: ', value, new Error().stack);
    this.sliderComponent.setSlide(value);
  }
}

删除ngFor也可以删除错误。如果重要的话，可以通过嵌套在app.component.html

中的角形路由器浏览/创建此页面。

为避免此错误需要更改什么？

ngFor上的ExpressionChangedAfterItHasBeenCheckedError使用反应形式的静态属性

0 个答案: