Angular 用 textarea 抛出 ExpressionChangedAfterItHasBeenCheckedError

Question

当我单击列表下的一项并转到详细信息页面时，它会抛出 ExpressionChangedAfterItHasBeenCheckedError 和 DebugContext。

我能够剥离我的原始项目以进行 plunker 并重现错误。 该错误仅发生在 Textarea 中。如果我用 Input 替换 Textarea 就可以了。

Plunkr Link

The exception

请参阅第 3 条评论以获取实时示例的链接和详细信息。

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { BeginEventEmitter, EndEventEmitter } from './emitter';
import { SelectSourceService } from "./sourceselect.service";

import { CodeService } from "./codes.service";
import { Code } from "./code"

@Component(
    {
        selector: 'Detail',
        template: `    <h3>Details</h3>
    <form>
      <div class="form-group">
        <label for="id">ID</label>
        <input type="text" class="form-control" id="id" name="id" [(ngModel)]="theCode.id">
      </div>
      <div class="form-group">
        <label for="description">description</label>
        <textarea class="form-control" id="description" name ="description" rows=10 cols=30 [(ngModel)]="theCode.description"></textarea>
      </div>
      <button type="button" class="btn btn-default" (click)="OnFormSubmit()">Submit</button>
    </form>`
    })
export class DetailsComponent implements OnInit, OnDestroy  {

    theCode: Code;
    id: string;
    showLoader: boolean = true;
    source : string;

    setDetail(): void {
        this.theCode = this.codeService.getCode4Id(this.source, this.id);
    }

    constructor(private codeService: CodeService, private route: ActivatedRoute, private router: Router, 
        private _selSourceService: SelectSourceService, private opening:BeginEventEmitter, private closing:EndEventEmitter) {

    }

    ngOnInit()
    {
        this.route.params
            .subscribe(value => this.id = value['id']);
        this.subscription = this._selSourceService.sourceSelection$.subscribe((selection: string) => { this.source = selection; this.setDetail(); });
        this.opening.emit("Opening Details for " + this.id);
    }

    ngOnDestroy() {
        this.closing.emit("Closing Details for " + this.id);
    }

    OnFormSubmit(data: Code): void {
        alert("The Changes were submitted");
        this.router.navigate(['/Codes']);
    }

    OnFormCancel() : void {
        alert("The form was cancelled");
    }
};    

Answer 1

打开你的 app 组件然后找到 ngOnInit 钩子并尝试替换

this.openDetails.subscribe(() => { this.detailOpen++; })

与

this.openDetails.subscribe(() => Promise.resolve(null).then(() => this.detailOpen++));

Updated Plunker