Angular 5 - Observables：无法使用 Firestore 访问文档的值

Question

当我尝试使用其 id 获取文档时，我无法获取文档的值，当我在控制台中显示变量时，它会显示

Observable {_isScalar: false, source: Observable, operator: MapOperator}

这是我的服务中我的功能的定义

getDataDetails(id: any) {
    this.dataDocumment = this.afs.doc('economie/' + id);
    return this.dataDocumment.valueChanges();;
  }

这是我的模板

<div class="main-content">
  <div class="container-fluid">
      <div class="header text-center">
          <h3 class="title">{{dataD.adresse | async | json}}</h3>
          <p class="category">Ensemble d'informations sur les communes prioritaires ou intervient CPDEP</p>
      </div>
      <div class="places-sweet-alerts">
          <div class="row">
              <div class="col-md-12">

                  <div class="card">
                      <div class="card-header card-header-icon" data-background-color="red">
                          <i class="material-icons">assignment</i>
                      </div>
                      <div class="card-content">
                          <h4 class="card-title">Présentations des communes</h4>
                          <div class="toolbar">



                                  <div class="col-lg-2"></div>
                                  <div class="col-lg-8">
                                      <div class="card">
                                          <div class="card-header card-header-danger" data-background-color="red">
                                              <h4 class="card-title">Circonscription de </h4>
                                              <p class="category">Département du </p>
                                          </div>
                                          <div class="card-content">
                                              <ul class="list-group list-group-flush">
                                                  <li class="list-group-item">Arrondissement : </li>
                                                  <li class="list-group-item">Nombre de sections communales : </li>
                                                  <li class="list-group-item">Organisation : </li>
                                                  <li class="list-group-item">Superficie : </li>
                                                  <li class="list-group-item">Population : </li>
                                                  <li class="list-group-item">Economie : </li>
                                                  <li class="list-group-item">Nombre de centres de vote : </li>
                                                  <li class="list-group-item">Nombre de bureaux de vote : </li>
                                                  <li class="list-group-item">Nombre d'électeur : </li>

                                              </ul>
                                          </div>
                                      </div>

                                  </div>
                                  <div class="col-lg-2"></div>
                              

                          </div>

                      </div>
                      <!-- end content-->
                  </div>
                  <!--  end card  -->
              </div>
              <!-- end col-md-12 -->
          </div>
      </div>
  </div>
</div>

这是我的组件代码

import { Component, OnInit } from '@angular/core';
import { EconomieService } from '../../services/economie.service';
import { Router, Params, ActivatedRoute} from '@angular/router';
@Component({
  selector: 'app-economie-detail',
  templateUrl: './economie-detail.component.html',
  styleUrls: ['./economie-detail.component.scss']
})
export class EconomieDetailComponent implements OnInit {
  id : string ;
  dataD : any;
  constructor(private eco: EconomieService,private route: ActivatedRoute) { }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    this.dataD = this.eco.getDataDetails(this.id);
  }
}

知道出了什么问题吗？

Answer 1

根据AngularFire2 documentation，使用valueChanges() 的Stream Document Data 返回一个Observable，需要将其解包以获取实际数据。

您必须subscribe 才能获得价值。

您可能还想考虑简单地使用async 管道，以免订阅中的unsubscribe 避免任何内存泄漏。

因此，考虑到此函数是从名为 DataService 的服务中公开的，无论您在何处使用此函数，都可以这样做：

import { Component, Input } from '@angular/core';

@Component({
  ...
})
export class HelloComponent  {

  data;
  data$;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getDataDetails('someId').subscribe(data => console.log(data));

    // OR
    this.data$ = this.dataService.getDataDetails('someId');

  }

}

然后，在您的模板中：

{{ data$ | async | json }}

这将在通过 async 管道传递 Observable 时展开。无论async 管道的输出是什么，都将通过json 管道将stringify JSON 对象转换为字符串。这就是将打印到字符串上的内容。希望现在有意义。

针对您的特定用例

使用这个：

{{ (dataD | async)?.adresse }}

如果有帮助，这里是StackBlitz。我很确定这应该使它起作用。这是我在 Cloud Firestore 中拥有的那种数据。