代码之家 › 专栏 › 技术社区 › Amine Jallouli

angularfer2@5.0.0-rc.10.snapshotchanges()无法让您获取doc.payload.doc.data()

angularfire2 firebase angular

0

Amine Jallouli · 技术社区 · 7 年前

版本信息

Angular: 3.0.4

Firebase: 5.0.3

AngularFire: 5.0.0 RC10

ng-test-angular6@0.0.0 /home/amine/docker-projects/ng-test-angular6
âââ @angular-devkit/build-angular@0.6.8
âââ @angular/animations@6.0.4
âââ @angular/cli@6.0.8
âââ @angular/common@6.0.4
âââ @angular/compiler@6.0.4
âââ @angular/compiler-cli@6.0.4
âââ @angular/core@6.0.4
âââ @angular/forms@6.0.4
âââ @angular/http@6.0.4
âââ @angular/language-service@6.0.4
âââ @angular/platform-browser@6.0.4
âââ @angular/platform-browser-dynamic@6.0.4
âââ @angular/router@6.0.4
âââ @types/jasmine@2.8.8
âââ @types/jasminewd2@2.0.3
âââ @types/node@8.9.5
âââ angularfire2@5.0.0-rc.10
âââ codelyzer@4.2.1
âââ core-js@2.5.7
âââ firebase@5.0.3
âââ jasmine-core@2.99.1
âââ jasmine-spec-reporter@4.2.1
âââ karma@2.0.2
âââ karma-chrome-launcher@2.2.0
âââ karma-coverage-istanbul-reporter@2.0.1
âââ karma-jasmine@1.1.2
âââ karma-jasmine-html-reporter@0.2.2
âââ protractor@5.3.2
âââ rxjs@6.2.0
âââ ts-node@5.0.1
âââ tslint@5.9.1
âââ typescript@2.7.2
âââ zone.js@0.8.26

如何再现这些条件

看一看 the angular project ng-angular6-angularfire5.0.0-rc.10

只是克隆,安装和服务。

调试输出

问题出在那一行的函数上 L20

  fetchAvailableExercices() {
    this.db.collection('availablesExercices')
    .snapshotChanges()
    .pipe(map( docArray => {
      return docArray.map( doc => {
        console.log(doc);
        return(
           {
           id: doc.payload.doc.id,
           name: doc.payload.doc.data().name,
           duration: doc.payload.doc.data().duration,
           calories: doc.payload.doc.data().calories,
         }
        //doc
      );
      });
    }))
    .subscribe(exercices => {
      this.availableExercices = exercices;
      this.availableExercicesChanged.next([...this.availableExercices]);
    });
  }

我得到的错误是:

Property 'name' does not exist on type '{}'.
Property 'duration' does not exist on type '{}'.
Property 'calories' does not exist on type '{}'.

另外,我不能建立角度应用的PROD版本。 ng build --prod

但是,如果我照原样处理文档(不设置名称、持续时间、卡路里),我就可以在get the browser控制台中获得预期的值:

> temp1.payload.doc.data()
{calories: 8, duration: 60, name: "Burpees"}


  fetchAvailableExercices() {
    this.db.collection('availablesExercices')
    .snapshotChanges()
    .pipe(map( docArray => {
      return docArray.map( doc => {
        console.log(doc);
        return(
        doc
      );
      });
    }))
    .subscribe(exercices => {
      this.availableExercices = exercices;
      this.availableExercicesChanged.next([...this.availableExercices]);
    });
  }

预期行为

以下错误 Property 'name' does not exist on type '{}'. 必须脱色。
制作一个产品必须成功

PS: 角火:5.0.0-rc.8 不扔错误消息 类型{}上不存在属性“name”。 . 尽管如此,它还是未能构建角度应用程序的prod版本。

ng build --prod

Date: 2018-06-10T20:10:08.203Z
Hash: 3395c915a85b5198ef71
Time: 4427ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.d651e93934b267387a12.css (styles) 56.5 kB [initial] [rendered]
chunk {2} polyfills.cdf87a8e5b31fe8a11f1.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.a2bc6cab25d0aa41c17a.js (main) 128 bytes [initial] [rendered]

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'AngularFireModule' was called.

2 回复 | 直到 7 年前

1

0

Tim Martens 7 年前

在您的项目中,AngularFire2&FireBase的版本有一些问题。

我就是这么做的:

npm i angularfire2@5.0.0-rc.10 --save
npm i firebase@5.0.4 --save

在你 data.service.ts 键入 db.collection() 呼叫

 fetchAvailableExercices() {
    this.db.collection<IExercice>('availablesExercices') //  <== This line
    .snapshotChanges()
    .pipe(map( docArray => {
      return docArray.map( doc => {
        console.log(doc);
        return(
          {
          id: doc.payload.doc.id,
          name: doc.payload.doc.data().name,
          duration: doc.payload.doc.data().duration,
          calories: doc.payload.doc.data().calories,
        }
      );
      });
    }))
    .subscribe(exercices => {
      this.availableExercices = exercices;
      this.availableExercicesChanged.next([...this.availableExercices]);
    });
  }

你还有两句话 app.module :

您应该导入angularfirestoremodule(已注释掉)
不需要提供 AngularFireStore 在这里

属性错误已消失,生成正在工作。 Working example here

2

0

Amine Jallouli 7 年前

使用新版angularfire,代码变成:

  fetchAvailableExercices() {
    this.db.collection('availablesExercices')
    .snapshotChanges()
    .pipe(map( docArray => {
      return docArray.map( doc => {
        console.log(doc);
        return(
           {
           id: doc.payload.doc.id,
           name: doc.payload.doc.data()['name'],
           duration: doc.payload.doc.data()['duration'],
           calories: doc.payload.doc.data()['calories'],
         }
        //doc
      );
      });
    }))
    .subscribe(exercices => {
      this.availableExercices = exercices;
      this.availableExercicesChanged.next([...this.availableExercices]);
    });
  }

而且构建prod应用程序也很简单。