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

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

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

你知道它在调用 subscribe 函数时被填充。

所以最简单的方法是通过在 subscribe 调用中移动 console.log 来修改您的代码：

ngOnInit() {
  this.getAllDresses();
}

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

Answer 2

你的问题标题不清楚。但是，如果我正确理解您的问题，那么您在使用异步调用时会遇到问题。您必须在订阅内打印 console.log(this.dressArray) 或 return 来自 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()
        }
      })
    }))
  }

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

How to get first value and then another subscribe method

javascript

angularfire2

angular