Question

我尝试这样的事情：

component.ts

displayName: string;
email: string = `user+${this.displayName}@domain.com`;

component.html

<input type="text" [(ngModel)]="displayName" name="displayName">
<input type="email" [value]="email" name="email">

email在应用加载时更新一次，但在displayName更改时则不会更新。

我是否需要使用EventEmitter或ngOnChanges或其他任何内容？

Answer 1

原因是email属性用于初始化 email属性值，因此displayName属性的连续读取返回相同的值，无论{{1是否改变了。相反，您需要为email属性编写一个getter，并根据 displayName

计算返回值
尝试以下

get email(): string { return `user+${this.displayName}@domain.com`; }

Answer 2

我可以使用ngModelCange

解决这个问题

<强> component.ts

displayName: string;
email: string = null;

onKey(event: any) {
  this.email = (this.displayName === undefined || this.displayName === null) ? null : `user+${this.displayName}@domain.com`;
}

<强> component.html

<input type="text" [(ngModel)]="displayName" (ngModelChange)="onKey($event)" name="displayName">
<input type="email" [value]="email" name="email">

您也可以使用keydown代替ngModelChange。它具有相同的行为，至少在这种情况下。

当另一个变量发生变化时，更新Angular组件中的变量

2 个答案: