Question

我正在使用 AngularFire2 处理Angular 5和Firestore的项目。我想要做的是：＆＃34;当用户在第一个输入中输入文档ID时，通过从Firebase获取数据自动加载其他两个字段。

以下是我的表单图片

这只是一个例子，如果所有数据都在一个集合中，那么我很容易在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();
}

此处的问题是此用户是可观察的。我正在寻找一些方法将其转换为Object，以便我也可以将它绑定到表单中的User字段。

另外，如果在用户的情况下，如果我像上面的代码一样订阅了observable，我就不能立即获取数据，因为它是异步的。

如果我错了，请纠正我并提出我可以尝试的建议。

感谢

更新

我遵循了 DauleDK的建议。现在，我正在使用Reactive表单方法来更好地处理表单处理，Watched Observable系列，并对内部工作方式有一个合理的了解。

以下是我现在所拥有的：

＆＃13;

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

＆＃13;

以下是我得到的错误：

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)

Answer 1

如果不详细说明，您应该更多地探索可观察性，以解决您的问题。我认为你应该考虑switchmap结合反应形式来解决你的问题。然后你可以利用observables：

这样的事情：

$('.companysearch').click(function() {
  $('#loading').show();
  var prefix = $(this).attr('title');
  $.ajax({
    async: false,
    url: 'chouseapi.php',
    type: 'POST',
    data: {
      typ: 'fetchcompanydetails',
      company: $('#' + prefix + '-companynumber').val()
    },
    success: function(data) {
      var bits = data.split('~');
      var cno = $('#' + prefix + '-companynumber').val();
      $('#' + prefix + '-resetsearch').hide();
      $('#' + prefix + '-companyname').val('').show();
      $('#' + prefix + '-companynumberselect').hide();
      $('#' + prefix + '-companysearchbyname').show();

      $('#' + prefix + '-companyname').val(bits[0]);
      $('#' + prefix + '-companyincorporation').val(bits[1]);
      $('#' + prefix + '-companyaddress').html(bits[2]);
      $('#' + prefix + '-companysic').val(bits[3]);
      $('#' + prefix + '-companynumber').val(bits[4]);
      $('#' + prefix + '-companydata').html(bits[5]);
      $('#loading').hide();
    }
  });
});

我强烈建议使用一种资源来提高对observable的使用，关于这个主题是youtube series :)当你对Observable有了深刻的理解，那么你真的可以从Firestore和angularfire2中获利。如果您有任何问题，请告诉我。如果您创建了stackblitz，我可以提供详细信息:)

Angular Firestore显示有关输入更改的数据

1 个答案: