Angular 6 Firebase 快照返回未定义 [英] Angular 6 firebase snapshot returns undefined

问题描述

我正在将对象上传到我的数据库，然后尝试检索所有项目.在第二步我得到错误.:

我的对象类:

导出类数据{$key:字符串；名称:字符串；地址:字符串；地址2:字符串；pscode:字符串；代码:字符串；name2:字符串；卡车:卡车；拖车:拖车；电子邮件:字符串；电话:字符串；城市:字符串；国家:字符串；}

我的服务上传对象(工作正常):

businesss = {} as Data;createItemAuth() {this.afDatabase.list(`users/${this.auth.userId}/company/`).push(this.busines)}

我的服务 getUpload :

 getItem: Observable;获取上传(){this.getItem = this.afDatabase.list(`users/${this.auth.userId}/company/`).snapshotChanges().pipe(map(items => {返回 items.map(a => {const data = a.payload.val();const $key = a.payload.key;const $ref = a.payload.ref;return { $key, ...data, $ref };});}));返回 this.getItem;}

在组件中调用:

上传:Observable;ngOnInit() {this.uploads = this.back.getUploads();console.log(this.back.getUploads())}

HTML:(浏览器上什么都没有)

<p>{{info.name}}</p>

控制台.log on ngOnInit() :

<块引用>

Observable {_isScalar: false, source: Observable, operator:MapOperator} 运算符:MapOperator {project: ƒ, thisArg: undefined}来源:Observable {_isScalar: false, _subscribe: ƒ}_isScalar: 假原型:对象

版本控制:

"rxjs": "^6.1.0","firebase": "^5.4.1","@angular/cli": "6.0.0","打字稿": "2.7.2",

解决方案

我不得不更改以下代码:

从此:

 getUploads() {this.getItem = this.afDatabase.list(`users/${this.auth.userId}/company/`).snapshotChanges().pipe(map(items => {返回 items.map(a => {const data = a.payload.val();const $key = a.payload.key;const $ref = a.payload.ref;return { $key, ...data, $ref };});}));返回 this.getItem;}

为此:

 getUploads() {this.getItem = this.afDatabase.list(`users/${this.auth.userId}/company/`).snapshotChanges().map((actions) => {返回 actions.map((a) => {const data = a.payload.val();const $key = a.payload.key;const $ref = a.payload.ref;return { $key, ...data, $ref };});});返回 this.getItem;}

I am uploading object to my database and then trying to retrieve all items. On the second step I get errors. :

My object class :

export class Data {
  $key: string;
  name: string;
  address: string;
  address2: string;
  pscode: string;
  ccode: string;
  name2: string;
  trucks: Trucks;
  trailers: Trailers;
  email: string;
  phone: string;
  city: string;
  country: string;
}

My service upload object (works fine) :

busines = {} as Data;


createItemAuth() {
   this.afDatabase.list(`users/${this.auth.userId}/company/`).push(this.busines)
}

My service getUpload :

 getItem: Observable<any[]>;
 getUploads() {
    this.getItem = this.afDatabase.list(`users/${this.auth.userId}/company/`).snapshotChanges().pipe(map(items => {
      return items.map(a => {
        const data = a.payload.val();
        const $key = a.payload.key;
        const $ref = a.payload.ref;
        return { $key, ...data, $ref };
      });
    }));
    return this.getItem;
  }

Calling it in component :

uploads: Observable<Data[]>;
ngOnInit() {
   this.uploads = this.back.getUploads();
   console.log(this.back.getUploads())
}                                                           

HTML: (nothing at all at browser)

<div *ngFor="let info of uploads | async">
  <p>{{info.name}}</p>
</div>

Console.log on ngOnInit() :

Observable {_isScalar: false, source: Observable, operator: MapOperator} operator: MapOperator {project: ƒ, thisArg: undefined} source: Observable {_isScalar: false, _subscribe: ƒ} _isScalar: false proto: Object

Versioning :

"rxjs": "^6.1.0",
  "firebase": "^5.4.1",
  "@angular/cli": "6.0.0",
    "typescript": "2.7.2",

解决方案

I had to change the following code :

From this :

  getUploads() {
    this.getItem = this.afDatabase.list(`users/${this.auth.userId}/company/`).snapshotChanges().pipe(map(items => {
      return items.map(a => {
        const data = a.payload.val();
        const $key = a.payload.key;
        const $ref = a.payload.ref;
        return { $key, ...data, $ref };
      });
    }));
    return this.getItem;
  }

To this :

 getUploads() {
    this.getItem = this.afDatabase.list(`users/${this.auth.userId}/company/`).snapshotChanges().map((actions) => {
      return actions.map((a) => {
        const data = a.payload.val();
        const $key = a.payload.key;
        const $ref = a.payload.ref;
        return { $key, ...data, $ref };
      });
    });
    return this.getItem;
  }

这篇关于Angular 6 Firebase 快照返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！