Angular 7提取可观察数据

Question

我是新手。

我想从可观察的数据中提取数据。 我这样做：

validnomi(key : string): void {
  this.demandesnomiftodisplay = 
    this.demandenomisService.getSingleDemandenomis(key).subscribe(val => 

    {const civ = val[0].civ; 
     const datedemande = val[0].datedemande; 
     const nom = val[0].nom; 
     const prenom = val[0].prenom; 

     }
  );
}

我的service.ts：

getSingleDemandenomis(key: string){
return this.database.list('/Demandes/DemandesBALnominatives', ref => ref.orderByKey().equalTo(key)).snapshotChanges().pipe(map(actions => {
  return actions.map(a => {
    const data = a.payload.val();
    const key = a.payload.key;
    return {key, ...data };
  });
}));
 }

但是我有这个错误：

property prenom does not exist on type {key : string}
property nom does not exist on type {key : string}
property civdoes not exist on type {key : string}

....

Answer 1

看起来正确，您只需要进一步阅读数组的第一个元素并访问所需的属性即可。

您的服务：

getSingleDemandenomis(key: string): Observable<{key: string; datedemande: string}[]> {
   return this.database.list('/Demandes/DemandesBALnominatives', ref => 
       ref.orderByKey().equalTo(key)).snapshotChanges().pipe(map(actions => {
          return actions.map(a => {
              const data = a.payload.val();
              const payloadKey = a.payload.key;
              return {key: payloadKey, ...data };
          });
   }));
 }

零件：

validnomi(key : string) {
    this.demandesnomiftodisplay = this.demandenomisService.getSingleDemandenomis(key)
    .subscribe((val: {datedemande: string}[]) => console.log(val[0].datedemande));
}

Answer 2

日志中的括号表示您不是在获取对象，而是在获取对象数组。 只需获取数组的第一个元素，便可以访问对象的所有属性。

另外，您不应使用JSON.stringify() ，因为它将对象数组转换为字符串。

validnomi(key : string) {
    this.demandesnomiftodisplay = this.demandenomisService.getSingleDemandenomis(key).subscribe(val => 
        // This will get the key from your object
        console.log(val[0].key);
    );
}

Answer 3

我会坚持观察：

validnomi(key : string) {
  this.demandesnomiftodisplay = 
    this.demandenomisService.getSingleDemandenomis(key).pipe(
    pluck('datademande')
  ).subscribe(val => console.log(val));

这是一个StackBlitz来说明。