angularfire2@5.0.0-rc.10 .snapshotChanges () не может позволить вам получить doc.payload.doc.data ()

Question

Информация о версии

Угловая: 6.0.4

База огня: 5.0.3

AngularFire: 5.0.0-rc.10

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

Как воспроизвести эти условия

Посмотрите на угловой проект 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 '{}'.

Кроме того, я не могу собрать версию углового приложения с расширенной версией ng build --prod

Но если япринять документ как есть (без указания имени, продолжительности, калорий), я могу получить в консоли браузера ожидаемое значение:

> 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: AngularFire: 5.0.0-rc.8 не выбрасывает сообщение об ошибкее Property 'name' does not exist on type '{}'..Тем не менее, он не может собрать версию углового приложения.

Answer 1

С новой версией 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 будет простым.

Answer 2

У меня были некоторые проблемы с версиями 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 здесь

Ошибки свойств исчезли и сборка работает. Рабочий пример здесь