下拉菜单上的 onChange 不适用于表单控件答案

【问题标题】：onChange on dropdown is not working with form control下拉菜单上的 onChange 不适用于表单控件
【发布时间】：2020-10-20 23:39:22
【问题描述】：

我的下拉菜单有问题。我里面有几个值，喜欢使用选定的值。这是我的代码，目前不工作。 FormControll 始终为空：

app.component.html

  <custom-dropdown [formControl]="majorAreaCtrl" (onChange)="onChange()" [label]="'EXPERTS.MAJOR_AREAS'|translate">
    <custom-dropdown-item *ngFor="let area of areas" [value]="area.key">
      {{ area }}
    </custom-dropdown-item>
  </custom-dropdown>

app.component.ts

export class ExpertsComponent implements OnInit {

  readonly majorAreas = MajorArea
  readonly areas = Object.values(this.majorAreas)
  readonly majorAreaCtrl = new FormControl()

  ngOnInit(): void {
    console.log(this.majorAreas, this.allExperts)
  }

  onChange() {
    console.log(this.majorAreaCtrl.value)
  }
}

有人看到我的错误吗？提前谢谢你！

【问题讨论】：

我相信值会在下一个刻度发生变化，所以理论上：setTimeout(() => { console.log(this.majorAreaCtrl.value); }, 0); 会起作用

标签： html angular typescript angular10

【解决方案1】：

您实际上不需要onChange 侦听器（[formControl] 绑定处理）。然而，这要求你的custom-dropdown 组件实现ControlValueAccessor 接口。

如果是这种情况，您应该能够通过订阅this.majorAreaCtrl.valueChanges Observable（例如）来响应更改。这是a small example，尽管没有您的自定义组件。

如果您的组件没有实现 ControlValueAccessor，我（以及这里的许多其他人）很乐意帮助您实现它。

【讨论】：

感谢您的回答。我认为它没有按应有的方式工作。当我登录this.majorAreaCtrl.valuesChanges 时，我的控制台中什么也没有。或者我的意思是不超过EventEmitter_ {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
this.majorAreaCtrl.valueChanges 实际上是一个 Observable，所以为了对它的更改做出反应，你需要订阅它（在某些时候）。作为一个快速测试，看看它是否工作，试试this.majorAreaCtrl.valueChanges.subscribe(console.log)。每次 Observable “发出”一个值时都会记录下来。