如何使用Ionic4从Firebase数据库获取数据

Question

我是Ionic的新用户。我有抚摸卡，我的目标是在Firebase数据库中显示图片，但是交换一张卡时会有滞后。我认为获取数据的方法非常昂贵，并且影响了动画性能。但是我不知道如何正确获取数据。

//Method to get Data :
getAllBars() {
    this.afd.list('/Bar/').valueChanges().subscribe(
      data => {
          this.bars = data;
        }
    )
  }
//Constructor with init:
constructor(private navCtrl: NavController, public modalCtrl: ModalController, public db:AngularFireDatabase) {
    this.stackConfig = {
      // Default setting only allows UP, LEFT and RIGHT so you can override this as below
      allowedDirections: [
        Direction.LEFT,
        Direction.RIGHT
      ],
      throwOutConfidence: (offsetX, offsetY, element) => {
        return Math.min(Math.abs(offsetX) / (element.offsetWidth/2), 1);
      },
      transform: (element, x, y, r) => {
        this.onItemMove(element, x, y, r);
      },
      throwOutDistance: (d) => {
        return 800;
      }
    };

  } 
    ngOnInit() {
    this.cards = [];
    this.bars = [];
    //this.users = USERS;
    this.getAllBars();
    this.addNewCard();
    this.addNewCard();
    setTimeout(() => {
      this.isLoading = false;
    }, 3000);
  }
//Add my array to cards :
addNewCard() {
    console.log("BARS TABLEAU:", this.bars);
    let differences = _.difference(this.bars, this.cards);

    if (!differences.length) return;

    let randomIndex = Math.floor(Math.random() * (differences.length));
    this.cards.push(differences[randomIndex]);

    console.info('CURRENT STACK:', this.cards.map(c => c.name));
  }

谢谢您的帮助。