Javascript 角度-加载数据-ID的初始值为NaN

在我用angular编写的web应用程序中，我将数据发布到数据库中，并在同一

html

上的表中显示这些数据。每个数据记录都有一个ID。每次我添加新数据时，ID都会增加。第一个输入字段显示实际ID，请参见下面的屏幕截图：

在我的

ngOnInit

-方法中，我正在初始化id，并调用函数

fbGetData（）

，以显示数据

但现在我面临一个奇怪的问题：

每次启动应用程序时，ID字段中显示的初始值都是

NaN

。

显然，我无法将任何数据发布到数据库，因为ID不是数字。因此，我必须切换到我的应用程序的另一个页面，然后再切换回来。之后，将显示正确的ID。我还尝试将我的方法从

ngOnInit

-方法移动到构造函数，但这没有帮助

不知何故，我认为我需要异步地实现方法，但我不知道如何做到这一点，因为我对Angular/Typscript非常陌生

我希望你们能帮我解决这个问题，或者给我任何提示或想法。 我感谢你的回答

这是我的

.ts

代码：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { DataService } from '../data.service';
import { Http } from '@angular/http';
import { rootRoute } from '@angular/router/src/router_module';
import { SearchNamePipe } from '../search-name.pipe';
import { LoginComponent } from '../login/login.component';
import {NavbarService} from '../navbar.service';

declare var firebase: any;
const d: Date = new Date();

@Component({
  selector: 'app-business-function',
  templateUrl: './business-function.component.html',
  styleUrls: ['./business-function.component.css'],
  encapsulation: ViewEncapsulation.None,
  providers: [DataService, SearchNamePipe, LoginComponent]
})

export class BusinessFunctionComponent implements OnInit {
  id;
  name: String;
  descr: String;
  typ: String;
  bprocess: String;
  appsystem: String;
  applications: String;
  datum: String;
  liste = [];
  bprocessliste = [];
  applicationliste = [];
  appsystemliste = [];
  isDesc: boolean = false;
  column: String = 'Name';
  direction: number;
  loginName: String;
  statusForm: Boolean = false;

  private idlist = [];

  constructor(
    private dataService: DataService,
    private router: Router,
    private route: ActivatedRoute,
    private searchName: SearchNamePipe,
    private navbarService: NavbarService
    ) {

    this.datum = Date().toString();
  }

  ngOnInit() {
    this.navbarService.show(); 
    firebase.database().ref().child('/AllID/').
    on('child_added', (snapshot) => {
      this.idlist.push(snapshot.val()
    )})
    this.id = this.idlist[0];
    console.log("ID: "+this.id);
    console.log("IDlist: "+this.idlist[0]);
    this.id++;
    console.log("ID: "+this.id);
    this.fbGetData();
  }

  fbGetData() {
    firebase.database().ref().child('/BFunctions/').orderByChild('CFlag').equalTo('active').
      on('child_added', (snapshot) => {
        //firebase.database().ref('/BFunctions/').orderByKey().on('child_added', (snapshot) => {
        // alter code ... neuer Code nimmt nur die Validen mit dem X Flag    
        this.liste.push(snapshot.val())
      });

    // firebase.database().ref().child('/ID/').on('child_added', (snapshot) => { 

    //Bprocess DB Zugriff
    firebase.database().ref().child('/BProcess/').orderByChild('CFlag').equalTo('active').
      on('child_added', (snapshot) => {

        this.bprocessliste.push(snapshot.val())
      });

    //Appsystem DB Zugriff
    firebase.database().ref().child('/Appsystem/').orderByChild('CFlag').equalTo('active').
      on('child_added', (snapshot) => {
        this.applicationliste.push(snapshot.val())
      })

    //Application DB Zugriff
    firebase.database().ref().child('/Application/').orderByChild('CFlag').equalTo('active').
      on('child_added', (snapshot) => {

        this.applicationliste.push(snapshot.val())
      });
    console.log(this.applicationliste);
  }

---

您需要更新回调中的

id

：

firebase.database().ref().child('/AllID/').on('child_added', (snapshot) => {
    this.idlist.push(snapshot.val())

    this.id = this.idlist[0];
    console.log("ID: "+this.id);
    console.log("IDlist: "+this.idlist[0]);
    this.id++;
    console.log("ID: "+this.id);
    this.fbGetData();
})

否则

id

将保留其初始

未定义的值。这是因为对firebase的调用是异步的

以下是原始代码中发生的情况：

调用firebase API。。。等待你的答复
将
id
设置为
this.idlist[0]
，该值为空（未定义）
…一段时间后，从firebase得到响应
id
不会得到更新，因为第2点中的代码。已经执行了
从异步调用中获得结果时需要执行的任何操作都必须在回调函数中执行