При создании динамического списка флажков я не могу получать данные от службы (наблюдаемые)

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(), а не в конструкторе, тогда все, что вы хотите сделать со значением, на которое вы подписываетесь, должно быть сделано в вашей подписке (). Попробуйте что-то вроде этого:

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)
      });
    }
  );
}