我有一个 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:开头的两行。
当我加载添加了这些行的页面时，然后单击"编辑"按钮打开对话框，如果从下拉列表中选择了名称，我可以看到它在文本字段中以淡化文本显示(即占位符值(，并且名称显示在文本字段之前(即在问候语"Hi name"中(。
但是，如果我在文本字段中输入一个新名称，尽管保留了该新名称值(即，如果我通过单击页面上的其他地方关闭对话框，然后通过再次单击"编辑"按钮重新打开它，那么我键入的新值仍然存在(，出于某种原因，该值未在"问候语"中使用(即{{ payer.preferredAddresseeName }}变量， 即使我在应该由字段的ng-change属性调用的updateTransactionContact()函数中设置了它：
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()函数时，我在控制台中收到一条错误消息：
无法读取未定义的属性"用户 ID" at TempalRemindersComponent.webpackJsonp../src/app/pages/dashboard/manage-tax/provisional-reminders/provisional-reminders.ts.ProvisionalRemindersComponent.updateTransactionContact
这是为什么呢？我在这里做错了什么？
我的猜测是这个错误来自以下行：
const data = (<any>Object).assign({}, payer, { transactionContactId: contact.userId });
在updateTransactionContact()函数的开头，但我不知道为什么当函数由文本字段的(change)属性而不是下拉列表的(change)属性调用时会发生这种情况？
事件是"冒泡"，你需要停止它的传播： https://developer.mozilla.org/fr/docs/Web/API/Event/stopPropagation
event.stopPropagation();
希望它能解决您的问题。