Как правильно инициализировать и назначить наблюдаемое с помощью angulafire2? - PullRequest
Новая
       21

Как правильно инициализировать и назначить наблюдаемое с помощью angulafire2?

0 голосов
/ 13 октября 2018

Я использую Angular 6 и Rxjs 6.

Следующий код будет выбрасывать undefined в ListFormsComponent снова и снова, пока Observable не будет присвоен getForms(), при котором он будетзатем отобразите данные.getForms() вызывается службой навигации при попытке перейти на страницу ListFormsComponent.

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>

NavigationService.ts 

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

Поэтому я решил инициализировать наблюдаемое, выполнив следующий код (см. Ниже) в конструкторе FormService.ts, и он останавливает ошибки, но не запускает подписку в ListFormsComponent.ts.Я предполагаю, что когда valueChanges() возвращает Observable в forms$, это нарушает остальную часть subscriptions.

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

1 Ответ

0 голосов
/ 13 октября 2018

Итак, проблема в этой функции: 

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

Вы позвонили this.formService.getForms();, что инициализирует forms$ на FormService.Но одновременно вы также переходите к forms, который будет отображать ListFormsComponent.В вашем ListFormsComponent вы делаете formService.forms$, который мог бы не инициализироваться в этот момент.Следовательно, вы получаете это как undefined.

Вместо использования forms$, я бы просто возвратил значение Observable из метода getForms, и я бы вызвал его в 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);
    });
  }

}

Кроме того, мне не нужно сейчас вызывать getForms с navigateForms.Чтобы я мог избавиться от этого: 

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