javascript - Angular - 数据已加载 - ID 的初始值为 NaN

Question

在我用 Angular 编写的网络应用程序中，我将数据发布到数据库，并且我在相同的 html在表格中显示这些数据。每条数据记录都有一个ID。每次我添加新数据时，ID 都会增加。第一个输入字段显示实际 ID，请参见下面的屏幕截图:

在我的 ngOnInit 方法中，我正在初始化 id 并调用函数 fbGetData() 以显示数据。

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

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

显然我无法将任何数据发布到数据库，因为 ID 不是数字。所以我必须切换到我的应用程序的另一个页面，然后再切换回去。之后显示正确的 ID。我还尝试将我的方法从 ngOnInit 方法移至构造函数，但这没有帮助。

不知何故，我认为我需要异步实现方法，但我不知道该怎么做，因为我对Angular/ typescript 。

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

这是我的.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);
  }

Answer 1

您需要更新回调中的 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 保留它的初始 undefined 值。这是因为对 firebase 的调用是异步的。

这是您的原始代码中发生的事情:

1. 调用 firebase API...等待您的回复
2. 设置id为this.idlist[0]，为空(undefined)
3. ...一段时间后，从 firebase 得到响应
4. id 不会更新，因为第 2 点中的代码已经执行。

从异步调用中获取结果时需要执行的任何操作都必须在回调函数内执行。