列表依赖于具有mat-select的Reactive表单

Question

如何使用Angular Material和Firestore以Reactive形式实现三个级别的依赖列表？

我在Firestore中有这个数据结构：

我有一个Angular Material的表格，如下所示：

component.html

<form [formGroup]="forma" (ngSubmit)="agregarAviso()" novalidate>
<mat-select placeholder="Categoría" formControlName="categoria">
  <mat-option *ngFor="let categoria of categorias | async [value]="categoria.nombre">
    {{ categoria.nombre }}
  </mat-option>
</mat-select>

<mat-select placeholder="Categoría" formControlName="subCategoria">
  <mat-option *ngFor="let categoria of categorias.subCategorias | async [value]="subCategoria">
    {{ subCategoria}}
  </mat-option>
</mat-select>

<mat-select placeholder="Categoría" formControlName="tipo">
  <mat-option *ngFor="let categoria of categorias.subCategorias.tipos | async [value]="tipo">
    {{ tipo }}
  </mat-option>
</mat-select>
</form>

component.ts

forma: FormGroup;

constructor( private fs: FirebaseService, fb: FormBuilder, afs: AngularFirestore) { 
this.forma = fb.group ({
  categoria: [ '', Validators.required ],
  subCategorias: [ '', Validators.required ],
  tipos: [ '', Validators.required ],
})
}

ngOnInit() {
this.getCategorias();
}

getCategorias() {
this.categorias = this.fs.getCategorias();
}

service.ts

getCategorias() {
  this.categorias = this.afs.collection('categorias', ref => ref.orderBy('nombre','asc')).valueChanges()
  return this.categorias
}