У меня есть приложение Angular, и на одной из страниц я отображаю таблицу, которая заполнена информацией о различных учетных записях.Один из столбцов называется «Контакт» и отображает раскрывающийся список, позволяющий пользователю выбрать контакт, который будет использоваться для этой учетной записи.Раскрывающийся список заполняется, когда на страницу загружаются все имена контактов, ранее добавленные в данную учетную запись.
Если пользователь хочет добавить новый контакт (т. Е. Тот, чье имя не отображается враскрывающийся список), они могут нажать кнопку «Изменить» в этой ячейке таблицы, что откроет диалоговое окно с формой, позволяющей им добавить новый контакт (только имя, фамилия и адрес электронной почты).
Я хочу добавить поля в это диалоговое окно, чтобы позволить пользователю установить «предпочтительное имя», которое будет использоваться для писем и электронных писем, что я сделал со следующим HTML:
<div class="provContactSelector" *ngIf="payer.editAddresseePanel">
<h3>
Payer Addressee Fields
<label class="icon icon-close-selected" [class.icon-close-selected]="payer.editAddresseePanel" (click)="displayEditAddressee(payer)"><span class="vh">Close edit contact</span></label>
</h3>
<div class="provContacts">
If you would like to override the Addressee's<br />
salutation in reminder communications... <br />
<br />
Salutation: Hi {{ payer.preferredAddresseeName }} <br /> <input class="provContacts__new-contact-field provContacts__name" [class.error]="newContactFormErrors.contactPreferredName" placeholder={{payer.preferredAddresseeName}} type="text" (change)="updateTransactionContact" autocomplete="given-name" formControlName="contactPreferredName" />
PDF: Hi {{ payer.preferredAddresseeName }}<br /> <input class="provContacts__new-contact-field provContacts__name" [class.error]="newContactFormErrors.contactPreferredAddresseeName" placeholder={{payer.preferredAddresseeName}} type="text" (change)="updateTransactionContact" autocomplete="preferred-address-name" formControlName="contactPreferredAddresseeName" />
<div class="provContacts__row">
<form [formGroup]="newContactForm" class="provContacts__col provContacts__new-contact">
<label>Add new contact</label>
<div class="provContacts__new-contact-fields">
<input class="provContacts__new-contact-field provContacts__name" [class.error]="newContactFormErrors.contactFirstName" placeholder="First name" type="text" autocomplete="given-name" formControlName="contactFirstName" />
<input class="provContacts__new-contact-field provContacts__name" [class.error]="newContactFormErrors.contactLastName" placeholder="Last name" type="text" autocomplete="family-name" formControlName="contactLastName" />
<input class="provContacts__new-contact-field provTaxContacts__email" [class.error]="newContactFormErrors.contactEmail" placeholder="Email address" type="email" autocomplete="email" formControlName="contactEmail" />
<button class="btn btn-primary provContacts__new-contact-button" type="button" (click)="onNewContactAdd(payer.accountId)">Add contact</button>
<div *ngIf="addContactLoading" class="spinner-loading"></div>
</div>
</form>
</div>
</div>
</div>
Этодве строки, начинающиеся с Salutation: & PDF:, которые я только что добавил.
Когда я загружаю страницу, добавив эти строки, и нажимаю кнопку «Редактировать», чтобы открыть диалоговое окно, если имя имеетбыл выбран из выпадающих списков, я вижу, что он отображается в блеклом тексте в текстовых полях (т. е. в качестве значения заполнителя), а имя отображается перед текстовым полем (т. е. в приветствии «Привет, имя»).
However, если я ввожу новое имя в текстовые поля, хотя это новое значение имени сохраняется (то есть, если я закрываю диалог, щелкая где-то еще на странице, а затем снова открываю его, снова нажимая кнопку «Редактировать», затемновое значение, которое я набрал, все еще там), по некоторым причинам, это значение не используется в «приветствии» (то есть переменной {{ payer.preferredAddresseeName }}, хотя я устанавливаю это в функции updateTransactionContact(), которая должна вызыватьсяатрибут ng-change поля:
updateTransactionContact($event, payer) {
payer.loading = true;
const contact = payer['contacts'][$event.currentTarget.selectedIndex];
const data = (<any>Object).assign({}, payer, { transactionContactId: contact.userId });
//console.log("updateTransactionContact() called from provisional-tax-reminders.ts ");
this.provService.updateTransactionContact(data).subscribe(
(response:any) => {
payer.originalTransactionContactId = payer.transactionContactId;
payer.transactionContactName = response.transactionContactName;
console.log("payer.transactionContactName (in updateTransactionContact()): ", payer.transactionContactName);
console.log("response (in updateTransactionContact()): ", response);
payer.preferredAddresseeName = payer.transactionContactName.firstName;
console.log("payer.preferredAddresseeName (in updateTransactionContact()): ", payer.preferredAddresseeName);
const message = new Message();
message.type = MessageType.SUCCESS;
message.message = 'Transaction Contact has been updated.';
this.messagingService.emitMessage(message);
payer.loading = false;
if (response.transactionContactId) {
payer.originalTransactionContactId = payer.transactionContactId = response.transactionContactId;
}
},
(error:any) => {
//reset the amount back to what it was originally because saving failed
payer.transactionContactId = payer.originalTransactionContactId;
const message = new Message();
message.type = MessageType.ERROR;
message.message = error.message || 'There was a problem updating the transaction contact. If the problem persists please contact us.';
this.messagingService.emitMessage(message);
payer.loading = false;
}
);
Отладка, которую я добавил к этой функции, отображается при выборе другого контакта из выпадающего списка, и я добавил тот же вызов функции в поля ввода, что иУ меня есть для выпадающего:
Выпадающего:
<select class="transactionContact" *ngIf="!payer.loading && payer.contacts && payer.contacts.length" [(ngModel)]="payer.transactionContactId" (change)="updateTransactionContact($event, payer)" [attr.disabled]="loadingTaxpayers ? '' : null">
Поля ввода:
Salutation: Hi {{ payer.preferredAddresseeName }} <br /> <input class="proContacts__new-contact-field provContacts__name" [class.error]="preferredContactFormErrors.contactPreferredName" placeholder={{payer.preferredAddresseeName}} type="text" ng-change="updateTransactionContact($event, payer)" autocomplete="given-name" formControlName="contactPreferredName" />
PDF: Hi {{ payer.preferredAddresseeName }}<br /> <input class="provContacts__new-contact-field provContacts__name" [class.error]="preferredContactFormErrors.contactPreferredAddresseeName" placeholder={{payer.preferredAddresseeName}} type="text" ng-change="updateTransactionContact($event, payer)" autocomplete="preferred-address-name" formControlName="contactPreferredAddresseeName" />
и все же по какой-то причине, при попытке изменить «предпочитаемый»имя контакта », введя новое значение в только что добавленные текстовые поля, когда я выхожу из них и вызывается функция updateTransactionContact(), в консоли появляется сообщение об ошибке:
Не могу прочитатьсвойство 'userId' не определено в ProvisionalRemindersComponent.webpackJsonp ../ src / app / pages / dashboard / manage-tax / временные-напоминания / provisional-Remders.ts.ProvisionalRemindersComponent.updateTransactionContact
Почему это?Что я здесь не так делаю?
Я предполагаю, что эта ошибка исходит из строки:
const data = (<any>Object).assign({}, payer, { transactionContactId: contact.userId });
в начале функции updateTransactionContact(), но я не знаюпочему это происходит, когда функция вызывается атрибутом (change) текстовых полей, а не атрибутом (change) раскрывающегося списка?