应用程序数据输入在表单和PrimeNG对话框上滞后3-5秒。
“ @ angular / core”：“〜7.2.0”， “ @ angular / forms”：“〜7.2.0”， “ @ angular / platform-browser”：“〜7.2.0”， “ @ angular / platform -browser-dynamic”：“〜7.2.0”， “ ngx-clipboard”：“ ^ 12.0.0”， “ ngx-embed-video”：“ ^ 1.0.4”， “ primeicons”：“ ^ 1.0.0”， “ primeng”：“ ^ 7.1.0”， “ quill”：“ ^ 1.3.6”，
我最近已从Angular 4 SystemJ升级到Angular7，我正在使用PrimeNg控件以及ag-grid。
HTML表单的代码示例
<div class="jarviswidget-ctrls" style="cursor: pointer;">
<a class="button-icon" id="btnMetaEdit" (click)="showMetaEditDialog()" title="Edit Metadata (Ctrl+Shift+E)">
<i class="glyphicon glyphicon-pencil"></i>
</a>
</div>
<p-growl [(value)]="msgs" life="5000"></p-growl>
<form #frmEditMeta="ngForm" >
<p-dialog [(visible)]="isDisplayDialog" id="docEditMetaUpload" showEffect="fade" [modal]="true" [style]="{width: '700px'}" [resizable]="false">
<p-header>
{{dialogTitle}}
</p-header>
<div class="upload-dialog">
<div id="smart-form" class="smart-form dialogSettings">
<div id="form-fields form-group">
<div class="row">
<div class="col-sm-12">
<fieldset>
<label class="label">File Name <span class="text-danger"></span></label>
<label class="input">
<input id="fileName" type="text" class="input-smText readonlyinput2" [(ngModel)]="metaData.FileName" name="fileName" #fileName="ngModel" [disabled]="true">
</label>
</fieldset>
</div>
</div>
<div class="row" id="diveditmeta">
<div class="form-group col-sm-6" [ngClass]="{'metadata-fields-status': isStatusModuleSelected == true}"> <!--[style.width]="isStatusModuleSelected==true?'316px':null"-->
<fieldset>
<label class="label">Document Type <span class="text-danger">*</span></label>
<label [ngClass]="{'readonlyinput2': recordType == 'Search'}">
<p-dropdown [options]="DocType" requried name="docType" #docType="ngModel" placeholder="Select Document Type" [style]="{width:'300px'}" [(ngModel)]="metaData.DocType" [filter]="true" [disabled]="recordType =='Search'"></p-dropdown>
</label>
</fieldset>
</div>
<div class="col-sm-6">
<fieldset>
<label class="label">Document Date <span class="text-danger">*</span></label>
<label class="input" [ngClass]="{'readonlyinput': parentWoNumber !='' && recordType=='MXR' ||recordType == 'Search'}">
<i class="icon-append fa fa-calendar"></i>
<p-calendar [monthNavigator]="true" [yearNavigator]="true" class="datepicker hasDatepicker" yearRange="1950:2030" [style]="{width:'285px'}"
requried name="docDate" #docDate="ngModel" [(ngModel)]="metaData.DocDate" [dateFormat]="dateFormatCalender" [disabled]="parentWoNumber !='' && recordType=='MXR' || recordType == 'Search'"></p-calendar>
</label>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-6" [ngClass]="{'metadata-fields-status': isStatusModuleSelected == true}">
<fieldset>
<label class="label">Document Number</label>
<label class="input">
<input id="docNumberMeta" type="text" class="input-smText" [(ngModel)]="metaData.DocNo" name="docNumberMeta" #docNumberMeta="ngModel" [disabled]="recordType == 'Search'" [ngClass]="{'readonlyinput2': recordType == 'Search'}">
</label>
</fieldset>
</div>
<div class="col-sm-6" *ngIf="recordType == 'MXR' ||recordType == 'Search'">
<fieldset>
<label class="label">{{referenceKeyLabel}} <span class="text-danger">*</span></label>
<label class="input">
<input id="woNumber" requried name="woNumber" #woNumber="ngModel" [(ngModel)]="metaData.ReferenceKey" [disabled]="parentWoNumber != '' || recordType == 'Search'" [ngClass]="{'readonlyinput2': parentWoNumber != '' ||recordType == 'Search'}" type="text" class="input-smText">
</label>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<fieldset>
<label class="label">Tags</label>
<p-multiSelect id="tagsctrledit" [options]="tags" [(ngModel)]="selectedTags" [style]="{width:'100%'}" name="tagsctrledit" #tagsctrledit="ngModel"></p-multiSelect>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<fieldset>
<label class="label">Comments</label>
<label class="textarea"><textarea id="comments" name="comments" #comments="ngModel" [(ngModel)]="metaData.Comments" class="custom-scrollNote no-overflow-x" rows="2"></textarea></label>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<fieldset>
<label class="label">History</label>
<label class="textarea"><textarea id="history" name="history" #history="ngModel" [(ngModel)]="metaData.History" class="custom-scrollNote readonlyinput2 no-overflow-x" rows="3" disabled></textarea></label>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<!--Contents End Here-->
<p-footer>
<div class="ui-dialog-buttonpane ui-helper-clearfix">
<div class="smart-form"><label class="label pull-left">{{metaData.SeqNo}}</label></div>
<button type="button" pButton icon="fa fa-check" class="btn btn-primary" (click)="btnUpdateMetaData()" [disabled]="!frmEditMeta.form.valid || isSubmitted || (metaData.DocType=='')||(recordType == 'MXR' && metaData.ReferenceKey.length==0)||(!canEditMetaData)" label="Update"></button> <!--|| (metaData.DocType=='')|| (metaData.DocNo.length==0)||(recordType == 'MXR' && metaData.ReferenceKey.length==0)||metaData.DocDate==null-->
<button type="button" pButton icon="fa fa-close" class="btn btn-default" (click)="btnCancelClick(frmEditMeta)" label="Cancel" [disabled]="isSubmitted"></button>
</div>
</p-footer>
</p-dialog>
</form>