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

Question

我开发了一个简单的 Angular 7 网络应用程序。火力数据库连接，我正在尝试使用 subscribe 方法将第一个列表存储在一个数组中，然后 console.log 该数组。但在数据获取之前，数组将在一段时间后打印 undefined ，它将获取数据。代码如何等待响应完成，然后打印该数组。

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()
        }
      })
    }))
  }