我有一个父组件，而许多子组件都有MAT-AUTOCOMPLETE。浏览具有自动完成功能的字段后，减慢了完整表单上的键入速度。
谢谢。
父组件HTML
<div>
<div>
<form autocomplete="off" id="airwaybillForm" name="airwaybillForm" method="POST" action="javascript: void(0);" jhiFormFieldsChangesDetector jhiFormReset="awbprefix" [formGroup]="airwaybillForm" novalidate (ngSubmit)="submitAirwaybill();">
<div>
<jhi-header-buttons [form]="airwaybillForm"></jhi-header-buttons>
</div>
<mat-card class="aci-sample-card">
<mat-card-content class="aci-sample-content">
<div class="row custom-mat-card-header">
<div class="col-12 default-row-height">
<mat-card-header>
<mat-card-title>Master Airway Bill Details</mat-card-title>
</mat-card-header>
</div>
</div>
<div class="row">
<div class="col-4 custom-awbnumber">
<mat-form-field>
<jhi-awbnumber-search
[awbnumberGroup]="airwaybillForm.controls.awbnumberGroup"
[isFormSubmitted]="isFormSubmitted"
[isFormFieldMarkAsTouched]="isFormFieldMarkAsTouched"
[isFormFieldsEnabled]="isFormFieldsEnabled"
(isFormFieldsEnabledEmitter)="isFormFieldsEnabledChange($event)"
[formControlAwbprefixName]="'awbprefix'"
[formControlAwbprefixValue]="formControlAwbprefixValue"
[formControlAwbnumberName]="'awbnumber'"
[formControlAwbnumberValue]="formControlAwbnumberValue"
[fieldChangeShowConfirmationDialog]="true"
[isAwbPrefixFieldInvalid]="isAwbPrefixFieldInvalid"
[isRequired]="true"
placeholder="Airway Bill Number">
</jhi-awbnumber-search>
<mat-icon matSuffix class="forward-search-icon">
<a href="javascript: void(0);" (click)="searchAirwayBill(airwaybillForm.get('awbnumberGroup.awbprefix').value, airwaybillForm.get('awbnumberGroup.awbnumber').value); $event.stopPropagation();">arrow_forward</a>
</mat-icon>
</mat-form-field>
</div>
<div class="col-4">
<jhi-origin-search
[fieldId]="'origin'"
[fieldName]="'origin'"
[fieldPlaceholder]="'Origin'"
[originGroup]="airwaybillForm.controls.originGroup"
[isFormSubmitted]="isFormSubmitted"
[compareWithFieldValue]="airwaybillForm.get('destinationGroup.destination').value"
[formControlFieldName]="'origin'"
[isRequired]="true">
</jhi-origin-search>
</div>
<div class="col-4">
<jhi-destination-search
[fieldId]="'destination'"
[fieldName]="'destination'"
[fieldPlaceholder]="'Destination'"
[destinationGroup]="airwaybillForm.controls.destinationGroup"
[isFormSubmitted]="isFormSubmitted"
[compareWithFieldValue]="airwaybillForm.get('originGroup.origin').value"
[formControlFieldName]="'destination'"
[isRequired]="true">
</jhi-destination-search>
</div>
</div>
<div class="row">
<div class="col-4">
<jhi-pieces
[fieldId]="'pieces'"
[fieldName]="'pieces'"
[fieldPlaceholder]="'Pieces'"
[piecesGroup]="airwaybillForm.controls.piecesGroup"
[formControlFieldName]="'pieces'"
[isFormSubmitted]="isFormSubmitted"
[maxLength]="4"
[isRequired]="true"
[isReadOnly]="false">
</jhi-pieces>
</div>
<div class="col-4">
<jhi-weight
[fieldId]="'weight'"
[fieldName]="'weight'"
[fieldPlaceholder]="'Weight'"
[weightGroup]="airwaybillForm.controls.weightGroup"
[formControlFieldName]="'weight'"
[isFormSubmitted]="isFormSubmitted"
[format]="'5,2'"
[maxLength]="8"
[isRequired]="true"
[isReadOnly]="false">
</jhi-weight>
</div>
<div class="col-4">
<jhi-volume
[fieldId]="'volume'"
[fieldName]="'volume'"
[fieldPlaceholder]="'Volume'"
[volumeGroup]="airwaybillForm.controls.volumeGroup"
[formControlFieldName]="'volume'"
[isFormSubmitted]="isFormSubmitted"
[format]="'7,2'"
[maxLength]="10"
[isRequired]="true"
[isReadOnly]="false">
</jhi-volume>
</div>
</div>
<div class="row">
<div class="col-12">
<jhi-customer-search
[fieldId]="'customer'"
[fieldName]="'customer'"
[fieldPlaceholder]="'Customer'"
[customerGroup]="airwaybillForm.controls.customerGroup"
[isFormSubmitted]="isFormSubmitted"
[formControlFieldName]="'customer'"
[maxLength]="40"
[isRequired]="true"
(consigneeDetail)="populateConsignee($event);">
</jhi-customer-search>
</div>
</div>
<div class="row">
<div class="col-12">
<jhi-shc-codes
[fieldId]="'shcCodes'"
[fieldName]="'shcCodes'"
[fieldPlaceholder]="'SHC'"
[shcCodesGroup]="airwaybillForm.controls.shcCodesGroup"
[isFormSubmitted]="isFormSubmitted"
[formControlFieldName]="'shcCodes'"
[fieldShcCodes]="airwaybillForm.get('shcCodesGroup.shcCodes').value"
[isSearched]="isSearched"
[maxChipsAllowed]="9"
(isSearchedFalse)="isSearchedFalse($event);"
[isRequired]="false"
[isDisabled]="airwaybillForm.get('shcCodesGroup.shcCodes').disabled"
[isRemovable]="isCreateMode">
</jhi-shc-codes>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</div>
</div>
父html上的所有字段均为子组件。我也在下面发布了1个子组件代码，所有其他子组件都有几乎相似的代码。
客户组件-jhi-customer-search [HTML]
<div [formGroup]="customerGroup">
<mat-form-field>
<input
id="{{fieldId ? fieldId : 'customer'}}"
name="{{fieldName ? fieldName : 'customer'}}"
type="text"
placeholder="{{fieldPlaceholder ? fieldPlaceholder : 'Customer'}}"
(input)="searchCustomer($event.target.value);"
matInput
class="text-overflow-ellipsis uppercase"
title="{{fieldPlaceholder ? fieldPlaceholder : 'Customer'}}"
formControlName="{{formControlFieldName ? formControlFieldName : 'customer'}}"
[matAutocomplete]="auto"
[required]="isRequired"
maxlength="{{maxLength}}"
[readonly]="isReadOnly"
(focus)="isFocusOut = false; focusManager(true);"
(focusout)="isFocusOut = true; focusManager(false);"
autocomplete="off"
/>
<mat-error *ngIf="formErrors[formControlFieldName]">
{{formErrors[formControlFieldName]}}
</mat-error>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)='selectCustomer($event.option.value);' autoActiveFirstOption>
<mat-option *ngFor="let customer of customers" [value]="customer">
{{customer.userName}} - {{customer.companyName}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
客户组件[.ts脚本]
import { Component, OnInit, Input, OnChanges, HostListener, EventEmitter, Output, OnDestroy } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { CustomerService } from './customer.service';
import { CommonService, CUSTOMER_SEARCH_MIN_LENGTH } from '../../../shared';
import { Subscription } from '../../../../../../../node_modules/rxjs';
@Component({
selector: 'jhi-customer-search',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerSearchComponent implements OnInit, OnChanges, OnDestroy {
@Input() customerGroup: FormGroup;
@Input() isFormSubmitted: boolean;
@Input() isRequired: boolean;
@Input() fieldId: string;
@Input() fieldName: string;
@Input() fieldPlaceholder: string;
@Input() isReadOnly = false;
@Input() formControlFieldName: string;
@Input() maxLength: number;
@Output() consigneeDetail: EventEmitter<any> = new EventEmitter<any>();
auto: any;
customers: any;
validationMessages: any;
formErrors = [];
isFocusOut = false;
isCustomerSelected = true;
CUSTOMER_SEARCH_MIN_LENGTH = CUSTOMER_SEARCH_MIN_LENGTH;
getCustomersSubscriptions: Subscription;
constructor(
private commonService: CommonService,
private customerService: CustomerService
) { }
ngOnInit() {
this.validationMessages = {
[this.formControlFieldName]: {
required: 'Please enter customer name.'
}
};
}
@HostListener('change') ngOnChanges() {
if (this.isFormSubmitted) {
this.customerGroup.get('customer').markAsTouched();
this.focusManager(false);
}
this.checkValidations();
}
focusManager(isFocusIn = null) {
if (isFocusIn === true) {
this.customers = [];
this.customerGroup.get(this.formControlFieldName).setValidators([]);
}
if (isFocusIn === false) {
this.customerGroup.get(this.formControlFieldName).setValidators([]);
if (this.isRequired) {
this.customerGroup.get(this.formControlFieldName).setValidators([Validators.required]);
}
// checking length if it is less than the required then remove it automatically and on focus out check if searched data available then select top option automatically
const searchText = this.customerGroup.get(this.formControlFieldName).value;
if (searchText && searchText.length < this.CUSTOMER_SEARCH_MIN_LENGTH) {
this.customerGroup.get(this.formControlFieldName).setValue(null);
this.customerGroup.get('selectedCustomer').setValue(null);
} else if (this.isCustomerSelected === false && this.customers && this.customers[0] && this.customers[0].companyName) {
this.customerGroup.get(this.formControlFieldName).setValue(this.customers[0].companyName.toUpperCase());
this.customerGroup.get('selectedCustomer').setValue(this.customers[0]);
this.consigneeDetail.emit(this.customers[0]);
this.isCustomerSelected = true;
}
}
this.checkValidations();
}
checkValidations() {
this.customerGroup.get(this.formControlFieldName).updateValueAndValidity();
this.formErrors = this.commonService.getFormValidationErrors(this.customerGroup, this.validationMessages, this.formErrors);
}
selectCustomer(selectedCustomer = null) {
if (selectedCustomer) {
this.customerGroup.get(this.formControlFieldName).setValue(selectedCustomer.companyName.toUpperCase());
this.customerGroup.get('selectedCustomer').setValue(selectedCustomer);
this.consigneeDetail.emit(selectedCustomer);
this.isCustomerSelected = true;
}
if (this.isCustomerSelected === false) {
if (this.customers && this.customers[0] && this.customers[0].companyName) {
this.customerGroup.get(this.formControlFieldName).setValue(this.customers[0].companyName.toUpperCase());
this.customerGroup.get('selectedCustomer').setValue(this.customers[0]);
this.consigneeDetail.emit(this.customers[0]);
this.isCustomerSelected = true;
} else {
this.customerGroup.get(this.formControlFieldName).setValue(null);
this.customerGroup.get('selectedCustomer').setValue(null);
this.isCustomerSelected = false;
this.focusManager(false);
}
this.unSubscribeServices();
}
}
searchCustomer(searchText) {
this.isCustomerSelected = false;
this.unSubscribeServices();
this.customers = [];
if (searchText.length >= this.CUSTOMER_SEARCH_MIN_LENGTH) {
this.getCustomersSubscriptions = this.customerService.getCustomers(searchText).subscribe((response) => {
const custometrsDetails = response['details'];
if (custometrsDetails) {
custometrsDetails.forEach((customer) => {
if ((customer.userName && customer.companyName) || customer.wknCCode) {
this.customers.push({
'ccCode': customer.ccCode,
'companyName': customer.wknCCode ? 'WALKIN CUSTOMER' : customer.companyName,
'userName': customer.wknCCode ? 'WALKIN' : customer.userName,
'accountCode': customer.accountCode,
'companyCode': customer.wknCCode ? 'WLKIN' : customer.companyCode,
'customercode': customer.wknCCode ? 'WALKIN' : customer.customercode,
'street': customer.street,
'place': customer.place,
'countryCode': customer.countryCode,
'email': customer.email,
'mobile': customer.mobile,
'phone': customer.phone
});
}
});
if (this.isFocusOut) {
this.selectCustomer();
}
}
});
}
}
unSubscribeServices() {
if (this.getCustomersSubscriptions) {
this.getCustomersSubscriptions.unsubscribe();
}
}
ngOnDestroy() {
this.unSubscribeServices();
}
}
我尝试从所有子组件中删除[matAutocomplete] =“ auto”，它可以完美运行而不会出现任何运行缓慢的问题。