Angular 当另一个变量发生更改时更新角度组件中的变量

我试着这样做：

组件。ts

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

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" name="displayName">
<input type="email" [value]="email" name="email">

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

email

在加载应用程序时更新一次，但在

displayName

更改时不会更新

---

我是否需要使用

EventEmitter

或

ngOnChanges

或其他任何东西？

原因是

displayName

属性用于初始化

email

属性值，因此连续读取

email

属性返回相同的值，无论

displayName

是否更改。相反，您需要为

email

属性编写一个getter，并根据

displayName

试着跟随

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

---

通过使用

ngModelCange

组件。ts

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

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" name="displayName">
<input type="email" [value]="email" name="email">

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

您也可以使用

keydown

而不是

ngModelChange

。至少在这种情况下，它也有同样的行为