Получение неопределенного для ключей при попытке извлечь / извлечь все значения из БД Firebase с помощью Angular

Question

У меня есть следующий фрагмент кода, который извлекает записи из Firebase БД, используя Angular и Ionic.

. Он работает нормально, но не дает мне ключи для каждой записи.Это дает мне 'undefined'

. Я просмотрел различные онлайн-уроки, и похоже, что переключение с valueChanges() на snapshotChanges() сделает работу, но каждый онлайн-урок показывает свой способ извлечения записей из этогоЕсть также расхождения версий между тем, что я использую, и тем, что в сети.

Поскольку я прихожу из мира Java, я довольно новичок в мире JS.

Пожалуйста, руководство.

home.ts

export class HomePage implements OnInit {

    private items$: Item[] = [];

    constructor(private  shoppingListService: ShoppingListService) {
      this.shoppingListService.getShoppingList().valueChanges().subscribe((datas) => {
        datas.forEach(data => {
          console.log(data);

          //data.key is undefined here
          console.log("=>" + data.key + " " + data.name + " " + data.quantity + " " + data.price);
          this.items$.push({key: data.key, name: data.name, quantity: data.quantity, price: data.price});
        })
      }, (err) => {
        console.log("problem:", err);
      });
    }

}

ShoppingListService.ts

@Injectable()
export class ShoppingListService {

  //here 'shopping-list' is the name of the table
  private shoppingListRef = this.db.list<Item>('shopping-list');

  constructor(private db: AngularFireDatabase) {
    this.getShoppingList();
  }

  getShoppingList() {
    return this.shoppingListRef;
  }

}

Item.model.ts

export interface Item {
  key?: string;
  name: string;
  quantity: number;
  price: number
}

package.json

"angularfire2": "^5.1.0",
"firebase": "^5.5.9",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.3.3",

ионная информация

Ionic:

   ionic (Ionic CLI)  : 4.4.0 (C:\Users\abc\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

System:

   NodeJS : v10.13.0 (C:\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Answer 1

this.shoppingListService.getShoppingList().snapshotChanges().pipe(map((actions) => {
   actions.map(action => {
      console.log(action.payload.doc.data());
      var data = action.payload.doc.data();
      var id = action.payload.doc.id;
     //data.key is undefined here
      console.log("=>" + id + " " + data.name + " " + data.quantity + " " + data.price);
      this.items$.push({key: id, name: data.name, quantity: data.quantity, price: data.price});
    })
  }), catchError((err) => {
    console.log("problem:", err);
  });

попробуй и дай знать, есть ли у тебя проблемы.Импортируйте pipe, map и catchError из rxjs, как показано ниже

import { Observable, of, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

Угловая версия - 6

Перейдите по этой ссылке Как использовать snapshotchanges