p-dropdown 不会使用反应式表单手动设置值

Question

我试图在某些服务检索一些信息后手动设置表单，并且我需要再次设置回下拉列表中的值（使用 setTimeout 来实现实用性）。

旁边是一个正常的选择器，它按照我的预期工作。我对 p-下拉菜单做了同样的事情，但我根本不起作用。

它通过 onChange 方法检测到更改，但又什么也没发生。

https://stackblitz.com/edit/ge9bjb?file=src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.ts

也许需要一些

<p-dropdown>

的参考才能工作？

Answer 1

有一个解决方法可以解决此问题：

1. 在

   <p-dropdown>

   上添加模板引用，如

   #dd

   :

    <p-dropdown
      #dd
      formControlName="city"
      [options]="cities"
      optionLabel="name"
      (onChange)="onChange($event)"
    ></p-dropdown>

2. 使用

   @ViewChild

   阅读模板参考：

  @ViewChild('dd') dd:Dropdown

3. 在

   SetTimeout

   中添加以下内容以更新模型值：

    setTimeout(() => {
      this.cityName?.patchValue(this.cities[1], { onlySelf: true });
      this.dd.updateModel(this.cities[1]) // add this line to update model
      console.log(this.formGroup.getRawValue().city);
      console.log(this.formGroup2.getRawValue().cityName);
    }, 2000);

这应该适合你。

我认为这是因为下拉列表中的

modelValue

信号而发生的 引擎盖下的组件。