Angular 2 - 检查后表达式已更改

Question

当通过子组件的多个指令传递对象时，我收到以下错误消息:

检查后表达式发生了变化。先前的值:“真”。当前值:'false'。

模板:

<form *ngIf="deliveryrequest" [formGroup]="deliveryRequestForm" (ngSubmit)="onSubmit(deliveryRequestForm)">
    <h4>Detail: {{deliveryrequest.nr}}</h4>
    <div class="row">
        <div class="col-lg-6 col-xs-12 col-md-6 col-sm-6">
            <drr-request [request]="deliveryrequest" [group]="deliveryRequestForm"></drr-request>
            <drr-received [received]="deliveryrequest" [group]="deliveryRequestForm"></drr-received>
        </div>
        <div class="col-lg-6 col-xs-12 col-md-6 col-sm-6">
            <drr-requester [requester]="deliveryrequest" [group]="deliveryRequestForm"></drr-requester>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 col-xs-12">
            <button type="submit" class="btn btn-primary" [disabled]="!deliveryRequestForm.valid">Bewaren</button>
        </div>
    </div>
</form>

请求者组件模板:

<div [formGroup]="requesterForm">
    <div class="row">
        <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">Aanvrager</div>
                <div class="control-group">
                    <drr-person [required]="true" (isMinorEmittor)="setPersonIsMinor($event)" [group]="requesterForm"></drr-person>
                </div>
            </div>
        </div>
    </div>
    <div class="row" formArrayName="responsiblePersonsNationalNumbers">
        <div class="col-lg-6 col-xs-12 col-md-6 col-sm-6"
             *ngFor="let responsible of requesterForm.controls.responsiblePersonsNationalNumbers.controls; let i=index; trackBy:i">
            <div class="panel panel-default">
                <div class="panel-heading">Verantwoordelijke {{i + 1}}</div>
                <div class="control-group" [formGroupName]="i">
                    <drr-person [required]="i === 0" [group]="requesterForm.controls.responsiblePersonsNationalNumbers.controls[i]"></drr-person>
                </div>
            </div>
        </div>
    </div>
</div>

人员组件模板:

<p-growl [value]="msgs"></p-growl>
<div [formGroup]="personForm">
    <div class="row">
        <div class="col-lg-5">
            <label>Rijksregisternummer</label>
        </div>
        <div class="col-lg-7">

            <div [ngClass]="{ 'has-error': personForm.controls.nationalnumber.invalid, 'has-success': personForm.controls.nationalnumber.valid, 'has-feedback': true }">
                <input type="text" 
                       class="form-control"
                       data-mask="99.99.99-999.99"
                       placeholder="99.99.99-999.99"
                       (keyup)="lookupPerson($event)"
                       aria-describedby="inputSuccess2Status">
                <span class="glyphicon form-control-feedback" [ngClass]="{ 'glyphicon-ok' : personForm.controls.nationalnumber.valid, 'glyphicon-remove' : personForm.controls.nationalnumber.invalid }" aria-hidden="true"></span>
                <div id="inputSuccess2Status" class="sr-only">
                    <span *ngIf="personForm.controls.nationalnumber.valid">(success)</span>
                    <span *ngIf="personForm.controls.nationalnumber.invalid">(error)</span>
                </div>
            </div>
            <div *ngIf="personForm.controls.nationalnumber.dirty && !personForm.controls.nationalnumber.valid">
                <p *ngIf="personForm.controls.nationalnumber.errors" class="text-danger">
                    {{formErrors.nationalnumber}}
                </p>
            </div>
            <!--due to data-mask not passing value-->
            <input type="hidden" formControlName="nationalnumber" />
        </div>
    </div>
    <div *ngIf="person">
        <div class="row">
            <div class="col-lg-5">
                <label>Naam</label>
            </div>
            <div class="col-lg-7">{{person.familyName}}</div>
        </div>
        <div class="row">
            <div class="col-lg-5">
                <label>Voornaam</label>
            </div>
            <div class="col-lg-7">{{person.givenName}}</div>
        </div>
        <div class="row">
            <div class="col-lg-5">
                <label>Geboortedatum</label>
            </div>
            <div class="col-lg-7">{{person.birthDate | stringformat : 'xxxx-xx-xx' }}</div>
        </div>
        <div class="row">
            <div class="col-lg-5">
                <label>Adres</label>
            </div>
            <div class="col-lg-7" *ngIf="person.streetName">
                {{person.streetName}} {{person.houseNumber}} {{person.houseNumberExtension}}, {{person.postalCode}} {{person.municipalityName}}
            </div>
        </div>
        <div class="row" *ngIf="person.isMinor">
            <div class="col-lg-5">
                <label>Aanvraag minderjarige</label>
            </div>
            <div class="col-lg-7">
                <span>{{person.isMinor ? "Ja" : "Nee" }}</span>
            </div>
        </div>
    </div>
</div>

Answer 1

很奇怪，因为解决方法很简单。我在同一个地方遇到了这个错误。我读了一篇有趣的 article about the error .但我以其他方式解决了这个问题。
来自

<div class="row">
    <div class="col-lg-12 col-xs-12">
        <button type="submit" class="btn btn-primary" [disabled]="!deliveryRequestForm.valid">Bewaren</button>
    </div>
</div>

给

<div class="row">
    <div class="col-lg-12 col-xs-12">
        <button type="submit" class="btn btn-primary" [attr.disabled]="!deliveryRequestForm.valid">Bewaren</button>
    </div>
</div>