Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 2 – 表达在检查后发生了变化大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
通过子组件的多个指令传递对象时,我收到以下错误消息:

检查后表情发生了变化.上一个值:’true’.当前值:’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>

解决方法

很奇怪,因为解决方案很简单.我在同一个地方遇到了这个错误.我读了一篇有趣的 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>

大佬总结

以上是大佬教程为你收集整理的Angular 2 – 表达在检查后发生了变化全部内容,希望文章能够帮你解决Angular 2 – 表达在检查后发生了变化所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。