Question

我开发了一个简单的angular 7 Web应用程序。 Firebase数据库连接，我正在尝试使用subscription方法将第一个列表存储在数组中，然后console.log该数组。但是在获取数据之前，数组将在一段时间后打印未定义的数据。代码如何等待响应完成后再打印该数组。

import { Injectable } from '@angular/core';
import { AngularFireList, AngularFireDatabase } from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})
export class DressesService {

  constructor(public firebase: AngularFireDatabase) { }

  getJoinDresses(){
  	return this.firebase.list('makavana-tailor/dresses').snapshotChanges()
  }

}

import { Component, OnInit } from '@angular/core';
import { DressesService } from '../../services/dresses/dresses.service';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-con-dress',
  templateUrl: './con-dress.component.html',
  styleUrls: ['./con-dress.component.css']
})
export class ConDressComponent implements OnInit {

  constructor(private dresses: DressesService) { }
  dressArray = [];

  ngOnInit() {
    this.getAllDresses();
    console.log(this.dressArray)
  }

  getAllDresses(){
    this.dresses.getJoinDresses().subscribe(actions => {
      this.dressArray = actions.map(action => {
        return {
          $key: action.key,
          ...action.payload.val()
        }
      })
    })
  }
}

Answer 1

您的问题标题不清楚。但是，如果我正确理解了您的问题，则在使用异步调用时会遇到问题。您必须在订阅中打印console.log(this.dressArray)或从getAllDresses返回可观察的数据并在onInit()内进行订阅

代码：

ngOnInit() {
    this.getAllDresses().subscribe(data => {
         this.dressArray = data;
         console.log(this.dressArray)
    });
 }

getAllDresses(){
    return this.dresses.getJoinDresses().pipe(map(actions => {
      return actions.map(action => {
        return {
          $key: action.key,
          ...action.payload.val()
        }
      })
    }))
  }

Answer 2

当前代码的问题在于，您需要在数组有机会被填充之前显示它。

您知道它是在调用subscribe函数时填充的。

最简单的方法是在console.log调用内移动subscribe来修改代码：

ngOnInit() {
  this.getAllDresses();
}

getAllDresses(){
  this.dresses.getJoinDresses().subscribe(actions => {
    this.dressArray = actions.map(action => ({
      $key: action.key,
      ...action.payload.val()
    }));
    console.log(this.dressArray);
  })
}

如何获取第一个值，然后获取另一个订阅方法

2 个答案: