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”中）。

但是，如果我在文本字段中输入新名称，尽管会保留该新名称值（即，如果我通过单击页面上的其他位置来关闭对话框，然后再次单击“编辑”按钮来重新打开对话框，，那么我输入的新值仍然存在），由于某种原因，即使在{{1}中进行设置，该值也不会在“ greeting”中使用（即{{ 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" />函数被调用，我在控制台中看到一条错误消息：

无法读取未定义的属性“ userId” 在ProvisionalRemindersComponent.webpackJsonp ../ src / app / pages / dashboard / manage-tax / provisional-reminders / provisional-reminders.ts.ProvisionalRemindersComponent.updateTransactionContact

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

我的猜测是该错误来自此行：

updateTransactionContact()

在const data = (<any>Object).assign({}, payer, { transactionContactId: contact.userId });函数的开头，但是我不知道为什么通过文本字段的updateTransactionContact()属性而不是{{1} }下拉菜单的属性？

Answer 1

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

event.stopPropagation();

希望它可以解决您的问题。

在某个地方而不是在另一个地方被调用时，角度函数调用错误

1 个答案: