angular中如何使用 angulafire2 正确初始化和分配可观察值

我正在使用 Angular 6 和 Rxjs 6。

以下代码将一遍又一遍地在 ListFormsComponent 处抛出 undefined ，直到 Observable 被 getForms() 分配。然后将显示数据。当尝试导航到 ListFormsComponent 页面时，导航服务会调用 getForms()。

FormService.ts

export class FormService { 
 
  public forms$: Observable <Array<Form>> ; 
  public assignedForms$: Observable <Array<Form>> ; 
  public form$: Observable <Form>; 
  constructor( 
    private afs: AngularFirestore, 
    private authService: AuthService, 
  ) {} 
 
  getForms() { 
    let zippedData = zip(this.authService.user$); 
    zippedData.subscribe(data => { 
      this.forms$ = this.afs.collection('networks') 
        .doc(data[0].activeNetworkProfile.id) 
        .collection('companyProfiles') 
        .doc(data[0].activeCompanyProfile.id) 
        .collection<Forms>('inspectionForms') 
        .valueChanges(); 
    }) 
  } 
 
} 

ListFormsComponent.ts

export class ListFormsComponent implements OnInit { 
  public forms: Forms[]; 
  constructor(private formService: FormService, private navigateService: NavigationService) { 
 
    this.formService.forms$.subscribe(forms => { //<---Error here this.formService.forms$ is undefined 
      this.forms = forms; 
      console.log("Forms inside component"); 
      console.log(this.forms); 
    }) 
  } 
} 

ListFormsComponent.html

<mbsc-listview [options]="listSettings" style="display:none"> 
  <mbsc-listview-item (click)="viewDetails(form.id)" *ngFor="let form of forms"> 
    <h3 class="mbsc-lv-txt">{{form.name}}</h3> 
    <p class="mbsc-lv-txt">{{form.lastEdited | date: 'medium'}} </p> 
  </mbsc-listview-item> 
</mbsc-listview> 

导航服务.ts

navigateForms() { 
  this.formService.getForms(); 
  this.navigateService.navigate('forms'); 
} 

因此，我决定通过在 FormService.ts 的构造函数中执行以下代码(见下文)来初始化可观察对象，它会停止错误，但不会触发 ListFormsComponent.ts。我假设当 valueChanges() 将 Observable 返回到 forms$ 时，它会破坏其余的订阅。

this.forms$ = new Observable<Array<Forms>>(); 

请您参考如下方法:

所以问题出在这个函数中:

navigateForms() { 
  this.formService.getForms(); 
  this.navigateService.navigate('forms'); 
} 

您已调用 this.formService.getForms();，它将初始化 FormService 上的 forms$。但同时，您还导航到将呈现 ListFormsComponent 的 forms。在您的 ListFormsComponent 中，您正在执行 formService.forms$ ，它当时可能尚未初始化。因此，您将其视为未定义。

我不会使用 forms$，而是简单地从 getForms 方法返回 Observable 值，然后在ListFormComponent 的 ngOnInit 方法:

export class FormService { 
 
  public forms$: Observable <Array<Form>> ; 
  public assignedForms$: Observable <Array<Form>> ; 
  public form$: Observable <Form>; 
  constructor( 
    private afs: AngularFirestore, 
    private authService: AuthService, 
  ) {} 
 
  getForms() { 
    return zip(this.authService.user$).pipe( 
      flatMap(data => { 
        return this.afs.collection('networks') 
          .doc(data[0].activeNetworkProfile.id) 
          .collection('companyProfiles') 
          .doc(data[0].activeCompanyProfile.id) 
          .collection<Forms>('inspectionForms') 
          .valueChanges(); 
      }) 
    ); 
  } 
 
} 

然后在ListFormsComponent中:

export class ListFormsComponent implements OnInit { 
  public forms: Forms[]; 
  constructor( 
    private formService: FormService,  
    private navigateService: NavigationService 
  ) { } 
 
  ngOnInit() { 
    this.formService.getForms().subscribe(forms => { 
      this.forms = forms; 
      console.log("Forms inside component"); 
      console.log(this.forms); 
    }); 
  } 
 
} 

此外，我现在不需要从 navigateForms 调用 getForms。所以我可以摆脱它:

navigateForms() { 
  this.navigateService.navigate('forms'); 
}