从 Angular 17 中的另一个下拉列表更改下拉列表的值

Question

我试图以这样的方式设置表单，当有人在第一个下拉列表中选择

Mr

时，第二个下拉列表中的值将更改为

male

。 同样，如果有人选择

Miss/Mrs

，第二个下拉菜单将更改为

female

。

我怎样才能实现这个目标？

这是 HTML

<div class="master">
  <select [(ngModel)]="registration.salutation">
    <option value="Mr">Mr &nbsp;</option>
    <option value="Miss">Miss</option>
    <option value="Mrs">Mrs</option>
    <option value="Dr">Dr</option>
    <option value="Prof">Prof</option>
  </select>
</div>

<div class="slave">
  <select [(ngModel)]="registration.gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="others">Others</option>
  </select>
</div>

这是.TS：

ngOnInit(): void {
  //this.registration.salutation = 'Mr';
  if(this.registration.salutation = 'Mr') {
    this.registration.gender = 'male';
  }
  if(this.registration.salutation = 'Mrs' || 'Miss') {
    this.registration.gender = 'female';
  }
}

目前，当我在第一个下拉列表中选择任何值时，什么也不会发生。

Answer 1

您可以使用

ngModelChange

事件来应用您的逻辑：

<div class="master">
  <select [(ngModel)]="registration.salutation" (ngModelChange)="salutationChange()">
    <option value="Mr">Mr &nbsp;</option>
    <option value="Miss">Miss</option>
    <option value="Mrs">Mrs</option>
    <option value="Dr">Dr</option>
    <option value="Prof">Prof</option>
  </select>
</div>

salutationChange() {
  if(this.registration.salutation = 'Mr') {
    this.registration.gender = 'male';
  }
  if(this.registration.salutation = 'Mrs' || 'Miss') {
    this.registration.gender = 'female';
  }
}