Angular Firestore показывает данные об изменении ввода - PullRequest
Новая
       40

Angular Firestore показывает данные об изменении ввода

0 голосов
/ 26 апреля 2018

Я работаю над проектом с Angular 5 и Firestore, используя AngularFire2 .Я пытаюсь сделать следующее: «Когда пользователь вводит идентификатор документа при первом вводе, два других поля загружаются автоматически при получении данных из Firebase.

Вот изображение моегоформа

enter image description here

Это всего лишь один пример. Мне легко, если все данные находятся в одной коллекции, тогда я просто предварительно загружаю еев ngOnInit, но в некоторых случаях мне приходится отображать данные из других коллекций, например Users.

Вот что я делаю:

  • Я обнаружил изменение и вызвал функцию (change)="getPropertyInfo($event)"
  • Я вызываю FireBase и получаю данные

код: 

getPropertyInfo($document_id) {
  this.afs.collection('properties', ref => {
    return ref.where('strata_plan_no', '==', $document_id.target.value);
  }).valueChanges().subscribe(property => {
    if (property[0]) { // if these is any record
      this.jobForm.street_address = property[0]['street_address'];
      this.jobForm.suburb = property[0]['suburb'];
      console.log(property[0]);
      // I have a field called user_id in this property collection as well. 
    }
  });
}

Теперь ятакже хочу получить информацию о пользователе, используя выбранный property_id, который я делаю так: 

getUserByID(id: string): Observable < any > {
  return this.afs.collection('users').doc(id).valueChanges();
}

Issue здесь, это то, что этот пользователь является наблюдаемым. Я ищудля некоторого способа преобразовать его как объект, чтобы я мог связать его с моими полями пользователя в форме.

Кроме того, если в случае пользователей, если я подпишусьЧто касается наблюдаемого, как и приведенного выше кода, я не смогу мгновенно получить данные для отображения, поскольку они асинхронные.

Пожалуйста, исправьте меня, если я ошибаюсь, и предложите что-нибудь, что я мог бы попробовать.1042 *

Спасибо

Обновление

Я следовал DauleDK советам.Теперь я использую подход «Реактивные формы», чтобы получить больше информации о своей обработке форм, серии «Наблюдаемые наблюдения», и у меня есть разумное представление о том, как все работает внутри.

Вот что у меня сейчас: 

ngAfterViewInit(): void {
  this.jobsForm.get('property.strata_plan_no')
    .valueChanges
    .sample(Observable.fromEvent(this.strata_plan_no_input.nativeElement, 'blur'))
    .subscribe((strata_plan_no) => {
      this.propertyService.findByStrataPlanNo(strata_plan_no)
        .filter((property) => property !== null) // filter nulls
        .map(property => property[0]) // return the first element of the array
        .subscribe((property) => {
          console.log(property.manager_id); // this log gives me the ID i'm looking for.
          this.managerService.findByID(property.manager_id).subscribe((manager) => { // this subscribe gives me an error
            console.log(manager);
          });
        });
    });
}

Вот ошибка, которую я получаю: 

core.js:1449 ERROR TypeError: Cannot read property 'onSnapshot' of undefined
at Observable.eval [as _subscribe] (fromRef.js:8)
at Observable._trySubscribe (Observable.js:172)
at Observable.subscribe (Observable.js:160)
at ObserveOnOperator.call (observeOn.js:74)
at Observable.subscribe (Observable.js:157)
at Observable.ConnectableObservable.connect (ConnectableObservable.js:43)
at RefCountOperator.call (refCount.js:25)
at Observable.subscribe (Observable.js:157)
at MapOperator.call (map.js:57)
at Observable.subscribe (Observable.js:157)

1 Ответ

0 голосов
/ 26 апреля 2018

Не вдаваясь в подробности, вам нужно больше изучить наблюдаемые, чтобы решить вашу проблему.Я думаю, что вы должны изучить switchmap в сочетании с реактивными формами, чтобы решить вашу проблему.Затем вы можете использовать из наблюдаемых:

Что-то вроде этого: 

this.jobForm.get('documentIdControl').valueChanges() // Subscribe to value changes from form
.switchmap((documentId: string) => this.afs.doc(`properties/${documentId}`, ref => ref.where('strata_plan_no', '==', $document_id.target.value)))
.filter((property) => property !== null) // Include if you only wan't, if different from null.
.do((property) => {
   this.jobForm.street_address = property.street_address;
   this.jobForm.suburb = property.suburb;
})
.subscribe();

Один ресурс, который я настоятельно рекомендую улучшить для улучшения использования наблюдаемых, - это серия YouTube натема :) Если у вас есть четкое понимание Observables, то вы действительно можете извлечь выгоду из Firestore и angularfire2.Дайте мне знать, если у вас есть какие-либо вопросы, и если вы создадите стек-блиц, я могу помочь с деталями :)

...