Обновление переменной в компоненте Angular при изменении другой переменной

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

Причина в том, что displayName свойство используется для инициализации email значение свойства, следовательно, последовательные чтения email свойство возвращает одно и то же значение, независимо от того, displayName изменено или нет. вместо этого вам нужно написать геттер для email свойство и возвращаемая стоимость рассчитываются на основе 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, У него такое же поведение, по крайней мере, в этом случае.