Question

在我的网络应用程序上以角度编写我将数据发布到数据库，我在同一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);
  }

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的调用是异步的。

以下是原始代码中的内容：

调用firebase API ...等待您的回复
将id设置为this.idlist[0]，这是空的（未定义）
...一段时间后，从firebase获得回复
id未更新，因为第2点中的代码已经执行。

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

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

1 个答案: