angular - 共享相同 formControl 时 PrimeNg 下拉列表不更新其他下拉列表

Question

我正在尝试将多个primeng下拉菜单与反应表单一起使用，这些下拉菜单共享相同的formControl实例，但由于某种原因，在更改一个下拉菜单的值时，它不会更改其他下拉菜单的可见值。

这是我的视图代码：

<form [formGroup]="mainGroup">
First Select:<br/>
<p-dropdown
  [options]="options"
  formControlName="main">
</p-dropdown>
<br/>
<br/>
Second Select:<br/>
<p-dropdown
  [options]="options"
  formControlName="main">
</p-dropdown>
</form>
<br/>
<b>Actual value:</b> {{mainGroup.value.main}}

component.ts 代码：

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  fb: FormBuilder = new FormBuilder

  mainGroup = this.fb.group({
    'main': []
  })

  options = [
    {label: 'First', value: 'First'},
    {label: 'Second', value: 'Second'},
    {label: 'Third', value: 'Third'}
  ]
}

以及Stackblitz上的工作样本

有解决办法还是我错过了什么？

谢谢。

Answer 1

你必须手动设置值，它不会直接更新，如果你想直接更新，你必须使用[（ngModel）]。

它周围有一个错误。漏洞

这是堆栈闪电战

把它放在构造函数中

constructor(){
    this.mainGroup.get('main').valueChanges.subscribe(value => {
      this.mainGroup.get('main').setValue(value, { onlySelf: true, emitEvent: false, 
      emitModelToViewChange: true });
    }, error => {}, () => { });
}