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

Question

我尝试这样的事情：

组件.ts

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

组件.html

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

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

我需要使用EventEmitter或ngOnChanges其他什么吗？

Answer 1

原因是displayName属性用于初始化 email属性值，因此连续读取email属性返回相同的值，无论displayName是否更改。相反，您需要为基于email计算的属性和返回值编写一个 getter displayName

尝试关注

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

Answer 2

我能够通过使用来解决它ngModelCange

组件.ts

displayName: string;
email: string = null;

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

组件.html

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

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