创建动态复选框列表时，我无法从服务接收数据（可观察）

Question

在服务中，我使用此功能从 firebase 数据库接收所有记录。:

treatmentsRef:  AngularFireList<any>;
treatments$: Observable<any[]>;

receiveTreatment(){
    this.treatmentsRef = this.db.list('/treatments');
    this.treatments$ = this.treatmentsRef.valueChanges();

    return this.treatments$;
}

接下来我在我的组件中调用这个函数来填充数组：

treatments= [];

constructor(public dialog: MatDialog, protected CashdeskService: CashdeskService, private formBuilder: FormBuilder, public settings: SettingsService) { 

    this.settings.receiveTreatment().subscribe( res => this.treatments = res);
    console.log(this.treatments);
    const formControls = this.treatments.map(control => new FormControl(false));
    this.musicForm = this.formBuilder.group({
        treatments: new FormArray(formControls)
    });
}

当我 console.log 订阅时，一切都显示正常，但是当我尝试订阅 this.treatments 时，什么也没有发生。我需要这个才能工作，因为他们所有的治疗都将显示在一个动态复选框中，其结构如下：

<form [formGroup]="musicForm" (ngSubmit)="submit()">
    <label formArrayName="treatments" *ngFor="let desc of musicForm.controls.treatments.controls; let i = index" style="width: 100%">
         <input type="checkbox" [formControlName]="i">
         {{treatments[i].desc}}
    </label><br>
    <button>submit</button>
</form>

有知道解决办法的吗？或基于数组值创建动态列表的更简单方法。

Answer 1

首先，我建议您在 ngOnInit() 中而不是在构造函数中执行所有操作，然后，无论你想用你订阅的值做什么，都应该在你的 subscribe() 中完成。尝试这样的事情：

ngOnInit(){
  this.settings.receiveTreatment().subscribe( 
    res => { 
      this.treatments = res
      console.log(this.treatments);
      const formControls = this.treatments.map(control => new FormControl(false));
      this.musicForm = this.formBuilder.group({
        treatments: new FormArray(formControls)
      });
    }
  );
}

创建动态复选框列表时，我无法从服务接收数据（可观察）

When creating a dynamic checkbox list i can't receive data from service (observable)

angular-material

angular

angular-observable