Блог

Я использую автозаполнение Google Place в своем дочернем компоненте, но когда каждый ввод заполняется данными, родительский компонент не получает изменений, поэтому я не могу отправлять на сервер действительные данные.

У меня есть дочерний компонент, который я вызываю в родительском компоненте:

 <rc-billing-data *ngIf="accountData"
      [clientRegion]="accountData.region"
      [(currencyModel)]="accountData.currency"
      [currenciesModel]="accountData.currencies"
      [(billingLanguageModel)]="accountData.billingLanguage"
      [localeModel]="accountData.locales"
      [(autoPaymentModel)]="accountData.enableAutoPayment"
      [(countryModel)]="accountData.country"
      [billingCountriesModel]="accountData.billingCountries"
      [(zipModel)]="accountData.zip"
      [(cityModel)]="accountData.city"
      [(addressNameModel)]="accountData.addressName"
      [(addressTypeModel)]="accountData.addressType"
      [(addressNumberModel)]="accountData.addressNumber"
      [(addressFloorDoorModel)]="accountData.addressFloorDoor">
    </rc-billing-data>
  

В дочернем компоненте функция ввода Google place вызывает функцию handleAddressChange:

 <label for="googleAddress">Pontos cím keresése</label>
        <input ngx-google-places-autocomplete
               (onAddressChange)="handleAddressChange($event)"
               id="googleAddress"
               type="text">
  

Функция handleAddressChange изменяет значение ввода, но данные учетной записи не обновляются.

 handleAddressChange(event) {
    let address: Address;
    this.zipModel = '';
    this.cityModel = '';
    this.addressNameModel = '';
    this.addressTypeModel = '';
    this.addressNumberModel = '';
    this.addressFloorDoorModel = '';

    this.addressCoordsModel = {
      lat: event.geometry.location.lat(),
      lng: event.geometry.location.lng()
    };

    address = this.regionHelper.setAddressParts(this.clientRegion, event.address_components);

    this.countryModel = address.country;
    this.zipModel = address.zip;
    this.cityModel = address.city;
    this.addressNameModel = address.addressName;
    this.addressTypeModel = address.addressType;
    this.addressNumberModel = address.addressNumber;
  }
  

Если я вводил руководство во входные данные, они работают правильно.

Было бы лучше иметь в вашем дочернем компоненте источник выходного события (было бы лучше иметь один вход со всеми данными учетной записи), и ваш родительский объект должен управлять этим событием. Например:

Родительский компонент должен иметь это

HTML

 <child-component [accountData]="accountDataObject" (changesOnChild)="parentDetectChanges(event)" > </child-component>
  

ts

 parentDetectChanges(newData: any){
    //put the new values here


}

  

дочерний компонент

 @Input() accountData: AccountData;
@Output() changesOnChild = new EventEmitter<AccountData>();

....
some code
....

handleAddressChange(event) {
    //modify account data object

    ...

    this.changesOnChild.emit(this.accountData)
}