在一个地方调用而不是在另一个地方调用角函数调用错误

Question

我有一个 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 }} 变量，即使我在应该设置的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-reminders/provisional-reminders.ts.ProvisionalRemindersComponent.updateTransactionContact

这是为什么？我在这里做错了什么？

我的猜测是这个错误来自以下行：

const data = (<any>Object).assign({}, payer, { transactionContactId: contact.userId });

在updateTransactionContact() 函数的开头，但我不知道为什么会在文本字段的(change) 属性而不是下拉列表的(change) 属性调用该函数时发生这种情况?

Answer 1

事件是“冒泡”，您需要停止传播它： https://developer.mozilla.org/fr/docs/Web/API/Event/stopPropagation

event.stopPropagation();

希望它能解决您的问题。