【问题标题】:Angular 2 md-select don't bind selected value when populate from Observable array从 Observable 数组填充时,Angular 2 md-select 不绑定所选值
【发布时间】:2017-02-05 19:27:33
【问题描述】:

我有 angular2 反应形式,其中包含 md-select 以使用户从 firebase 中选择医生 md-select 在呈现组件之前存在数据时工作正常,但如果数据以可观察的方式异步传入,则不会显示所选值

 doctors$:Observable< Doctor[] > = this.doctorService.findAllDoctors();
 

  constructor(private fb:FormBuilder , public doctorService : DoctorService 
  ,private cdr: ChangeDetectorRef )

  {    
   
 this.doctors$= this.doctorService.findAllDoctors();
  
this.form = this.fb.group({
      FullName: ['',Validators.required],
      Ext: [''],
      BirthDate: ['',Validators.required],
      Gender: ['',Validators.required],
      Phone: ['',[Validators.required]],
      doctorId: ['']

    }); 
 
<md-select formControlName="doctorId" ngControl="doctorId"  placeholder="Doctor"  >
      <md-option *ngFor="let p of doctors$ | async  " [value]="p.value">{{p.value}}</md-option>

    </md-select>

在此处输入代码

【问题讨论】:

  • 您需要订阅数据。将医生服务代码更新到您的帖子。 ** 请注意,您的医生变量是可观察的**
  • 我已经订阅了数据并获得了医生列表,但不幸的是在创建表单组之后,所以当医生绑定到 md-select 时,它没有在其中找到选项,所以当我输入选项时它留空在像 var doctor= [{Name:"Ahmed"}, {Name:"Jack"}] 这样的构造函数中它可以工作! ,这里的问题是数据在绑定表单组后最近才来,在数据订阅后无论如何要创建表单组吗?提前致谢

标签: angular observable angularfire2 md-select reactive-forms


【解决方案1】:

通过在异步加载选项数据后使用选定值更新 md-select 解决

 ngOnInit() {
   
this.doctors$.subscribe(c=>{

    this.form.controls['doctorId'].patchValue(this.initialValue.doctorId);


});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-12-13
    • 2016-10-21
    • 1970-01-01
    • 2020-10-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-11
    相关资源
    最近更新 更多