Node.js 从节点JS后端加载数据时出现随机问题（Angular Ionic App）

我已经建立了一个角度离子应用程序。在主页中，我们有一个包含不同类别的菜单，当我们单击其中一个类别时，我们会进入一个目录，在那里我们可以找到一个包含属于该类别的不同项目的列表

有时当我们点击一个类别时；数据没有加载，我们有一个空列表

这是home.page.ts，我们单击一个类别，presentLoading方法将我们重定向到包含与该类别相关数据的列表的列表组件>

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { trigger, transition, animate, style, state } from '@angular/animations';
import { AngularFirestore } from 'angularfire2/firestore';
import { DataServiceService } from '../home/data-service.service';
import { ScrollHideConfig } from '../directives/hide.directive';
import { NavController } from '@ionic/angular';
import { Observable } from 'rxjs';
import { LoadingController } from '@ionic/angular';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

interface mess {
  message: string
}

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({transform: 'translateX(100%)', opacity: 0}),
          animate('400ms', style({transform: 'translateX(0)', opacity: 1}))
        ]),
        transition(':leave', [
          style({transform: 'translateX(0)', opacity: 1}),
          animate('400ms', style({transform: 'translateX(100%)', opacity: 0}))
        ])
      ]
    )
  ],
})
export class HomePage implements OnInit {

  show = false;
  recherche = '';
  userDoc;
  public items: any;
  public searchTerm = '';
  public mess: any;
  headerScrollConfig: ScrollHideConfig = { cssProperty: 'margin-top', maxValue: 54 };
  laDate;
  bienvenue = '';
  message = 'https://mda59.herokuapp.com/message'


  constructor(private dataService: DataServiceService, public navCtrl: NavController, private http: HttpClient,
              public loadingController: LoadingController ,
              private router: Router) {
    this.laDate = new Date().getHours();
    if ((this.laDate > 0 && this.laDate < 12)) {
        this.bienvenue = 'Bonjour';
    } else if ((this.laDate > 12 && this.laDate < 17 )) {
        this.bienvenue = 'Bon après-midi';
    } else {
        this.bienvenue = 'Bonsoir';
    }

   this.getMess();
  }

  async getMess() {
    this.http.get<mess>(this.message).subscribe(ref => this.mess = ref.message)
  }


  result() {
    this.show = true;
  }

  ngOnInit() {
    this.setFilteredItems();
  }

  setFilteredItems() {
    this.items = this.dataService.filterItems(this.searchTerm);
  }

  async presentLoading(event: Event) {
    const loading = await this.loadingController.create({
      message: 'Chargement de vos associations...',
      spinner: 'crescent',
      duration: 2000
    });
    await loading.present();
    const elementId = (event.target as Element).id;
    if (elementId) {
    this.router.navigateByUrl('home/cat/' + elementId);
    console.log('Navigate to association category');
    }
    const { role, data } = await loading.onDidDismiss();
  }
}

最后是data-service.service.ts，它包含从节点后端获取数据的API调用>

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class DataServiceService {

  public items: any = [];
  selectedObject;
  isLoading = true;
  loading;

  public mess: any;

  config = 'http://localhost:8080/json';
  config2 = 'http://localhost:8080/json2';
  message = 'http://localhost:8080/message';


  constructor(private http: HttpClient, public loadingController: LoadingController) {
    this.getData();
    this.presentLoading();
  }

  async presentLoading() {
    this.loading = await this.loadingController.create({
      message: 'Chargement de vos associations...',
      spinner: 'circular',
      duration: 4000
    });
    await this.loading.present();

    if (this.isLoading === false) {
      await this.loading.dismiss();
    }
  }

  async getData() {
    console.log('Data Service Get Data from Back-End');
    await this.http.get(this.config2).toPromise().then(ref => this.items = ref).finally(() => this.loadingController.dismiss(null, undefined));
  }

  sortAsso(array, key) {
    console.log('Data Service Sort Associations');
    return array.sort(function (a, b) {
      let x = a[key]; let y = b[key];
      return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });

  }

  filterById(jsonObject, id) {
    return this.items.filter(function (jsonObject) {
      return (jsonObject['num'] == id);
    })[0];
  }

  findId(id) {
    return this.filterById(this.items['num'], id);
  }

  filterByCat(jsonObject, id) {
    console.log('Data Service Filter By Category');
    return this.items.filter(function (jsonObject) {
      return (jsonObject['domaines'] == id);
    });
  }


  countArray() {
    return Object.keys(this.items).length;
  }

  findCat(id) {
    console.log('Data Service Find Category');

    this.items = this.sortAsso(this.items, 'etat');

    return this.filterByCat(this.items['domaines'], id);
  }


  findCat2(id) {
    this.items = this.sortAsso(this.items, 'etat');

    return this.filterByCat(this.items['domaines2'], id);

  }

  filterItems(searchTerm) {

    this.items = this.sortAsso(this.items, 'etat')

    return this.items.filter(item => {

      return (item.nom_associations.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1 || item.tag.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1);
    });
  }

}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从'@ionic/angular'导入{LoadingController}；
@注射的({
providedIn:'根'
})
导出类DataServiceService{
公共项目：任何=[]；
选择对象；
isLoading=true；
加载；
公共食堂：有；
config='1http://localhost:8080/json';
配置2=http://localhost:8080/json2';
消息='http://localhost:8080/message';
构造函数（私有http:HttpClient，公共loadingController:loadingController）{
这是getData（）；
这个.presentLoading（）；
}
异步呈现加载（）{
this.loading=等待this.loadingController.create({
信息：“vos协会收费…”，
微调器：“圆形”，
持续时间：4000
});
等待此消息。加载.present（）；
if（this.isLoading==false）{
等待此消息。正在加载。解除（）；
}
}
异步getData（）{
log（“数据服务从后端获取数据”）；
等待this.http.get（this.config2.toPromise（）。然后（ref=>this.items=ref）。最后（（）=>this.loadingController.dismise（null，未定义））；
}
排序（数组，键）{
log（“数据服务排序关联”）；
返回array.sort（函数（a，b）{
设x=a[key]；设y=b[key]；
回报率（（xy）？1:0）；
});
}
filterById（jsonObject，id）{
返回此.items.filter（函数（jsonObject）{
返回（jsonObject['num']==id）；
})[0];
}
芬迪德（id）{
返回this.filterById（this.items['num']，id）；
}
filterByCat（jsonObject，id）{
log（“数据服务按类别筛选”）；
返回此.items.filter（函数（jsonObject）{
返回（jsonObject['domaines']==id）；
});
}
countArray（）{
返回Object.key（this.items）.length；
}
findCat（id）{
log（“数据服务查找类别”）；
this.items=this.sortAsso（this.items'etat'）；
返回this.filterByCat（this.items['domaines']，id）；
}
findCat2（id）{
this.items=this.sortAsso（this.items'etat'）；
返回此.filterByCat（此.items['domaines2']，id）；
}
过滤器项（搜索项）{
this.items=this.sortAsso（this.items'etat'）
返回此.items.filter（item=>{
return（item.nom_associations.toLowerCase（）.indexOf（searchTerm.toLowerCase（））>-1 | | item.tag.toLowerCase（）.indexOf（searchTerm.toLowerCase（））>-1）；
});
}
}

你知道为什么数据有时不加载吗

非常感谢您的帮助！：）

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class DataServiceService {

  public items: any = [];
  selectedObject;
  isLoading = true;
  loading;

  public mess: any;

  config = 'http://localhost:8080/json';
  config2 = 'http://localhost:8080/json2';
  message = 'http://localhost:8080/message';


  constructor(private http: HttpClient, public loadingController: LoadingController) {
    this.getData();
    this.presentLoading();
  }

  async presentLoading() {
    this.loading = await this.loadingController.create({
      message: 'Chargement de vos associations...',
      spinner: 'circular',
      duration: 4000
    });
    await this.loading.present();

    if (this.isLoading === false) {
      await this.loading.dismiss();
    }
  }

  async getData() {
    console.log('Data Service Get Data from Back-End');
    await this.http.get(this.config2).toPromise().then(ref => this.items = ref).finally(() => this.loadingController.dismiss(null, undefined));
  }

  sortAsso(array, key) {
    console.log('Data Service Sort Associations');
    return array.sort(function (a, b) {
      let x = a[key]; let y = b[key];
      return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });

  }

  filterById(jsonObject, id) {
    return this.items.filter(function (jsonObject) {
      return (jsonObject['num'] == id);
    })[0];
  }

  findId(id) {
    return this.filterById(this.items['num'], id);
  }

  filterByCat(jsonObject, id) {
    console.log('Data Service Filter By Category');
    return this.items.filter(function (jsonObject) {
      return (jsonObject['domaines'] == id);
    });
  }


  countArray() {
    return Object.keys(this.items).length;
  }

  findCat(id) {
    console.log('Data Service Find Category');

    this.items = this.sortAsso(this.items, 'etat');

    return this.filterByCat(this.items['domaines'], id);
  }


  findCat2(id) {
    this.items = this.sortAsso(this.items, 'etat');

    return this.filterByCat(this.items['domaines2'], id);

  }

  filterItems(searchTerm) {

    this.items = this.sortAsso(this.items, 'etat')

    return this.items.filter(item => {

      return (item.nom_associations.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1 || item.tag.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1);
    });
  }

}