使用订阅方法从服务获取数据

Question

我有一个服务从数据库获取数据以填充数据表。我正在ngOnInit中component.ts方法使用subscribe来调用该服务：

this.service.getAll<StoreModel>("Store/GetAll").subscribe(x => { this.models = x });

但是，数据需要很长时间才能加载，数据表不会显示任何内容！ 在我的情况下我该怎么做？

这是我的服务。：

import {  Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { BaseModel } from '../models/base.model';

@Injectable({providedIn: 'root'})
export class AbstractService{
  url:string;
  constructor(private http: HttpClient) {
    this.url="http://localhost:63002";
  }

  public get<T extends BaseModel> (endpoint: string,params?:HttpParams): Observable<T> {
    return this.http.get<T>(`${this.url}/api/${endpoint}`,{params:params});
  }

  public getAll<T extends BaseModel> (endpoint: string,params?:HttpParams): Observable<T[]> {
    return this.http.get<T[]>(`${this.url}/api/${endpoint}`,{params:params});
  }
  public getById<T extends BaseModel> (endpoint: string,id: string): Observable<T> {
    return this.http.get<T>(`/api/${endpoint}/${id}`);
  }

  public add<T extends BaseModel> (endpoint: string,model: T): Observable<T> {
    return this.http.post<T>(`/api/${endpoint}`, JSON.stringify(model));
  }

  public post<T extends BaseModel>(endpoint: string,model: T): Observable<T> {
    return this.http.post<T>(`/api/${endpoint}`, JSON.stringify(model));
  }

  public update<T extends BaseModel> (endpoint: string,model: T): Observable<T> {
    return this.http.put<T>(`/api/${endpoint}`, JSON.stringify(model));
  }

  public delete<T extends BaseModel> (endpoint: string,id: string): Observable<T> {
    return this.http.delete<T>(`/api/${endpoint}/${id}`);
  }

}

这是我的组件。：

import { Component, OnInit,AfterViewInit, Input, EventEmitter, Output, ViewChild,OnDestroy  } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';
import { AbstractService } from './abstractservice';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { StoreModel } from '../models/StoreModel';


@Component({
  selector: 'store',
  templateUrl: './store.component.html',
  styleUrls: ['./store.component.css']
})

export class StoreComponent implements OnInit , AfterViewInit, OnDestroy {
  private selectUndefinedOptionValue:any;
    models : StoreModel[] = [];
    dtOptions: DataTables.Settings = {};
    @ViewChild(DataTableDirective)
    datatableElement: DataTableDirective;
    unit11:string;
    lArr = [];
    units: string[] = [];

    dtTrigger = new Subject();

  constructor(private http:HttpClient,private service: AbstractService) {  }


 ngOnInit(): void {

    this.service.getAll<StoreModel>("Store/GetAll")
    .subscribe( x => { this.models = x; console.log(x) });


            this.dtOptions = {
              data: this.models,
              ordering: false,
              searching:true,
              dom: 't' ,
              columns: [{
                data: 'strCode'
              }, {
                data: 'strConRfid'
              }, {
                data: 'strAccRfid'
              },{
                data: 'strTypeUid'
              },{
                data: 'strCurRfid'
              }
            ],          
            };  



  }

ngAfterViewInit(){

  setTimeout(() => {
     this.units  = this.fillUnitValues();
  }, 1);
  this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
    dtInstance.columns().every(function () {
      const that = this;
      $('input', this.header()).on('keyup change', function () {
        if (that.search() !== this['value']) {
          that
            .search(this['value'])
            .draw();
        }
      });
    });
  }); 
}

rerender(): void {
  this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
    // Destroy the table first
    dtInstance.destroy();
    // Call the dtTrigger to rerender again
    this.dtTrigger.next();
  });
}
fillUnitValues(){
  for (var i=0;i<this.models.length;i++){
    //this.lArr.push(this.models[i].ContactPerson);
  }
  this.lArr = this.removeDuplicates(this.lArr);
  return this.lArr;
}
removeDuplicates(arr){
let unique_array = []
for(let i = 0;i < arr.length; i++){
    if(unique_array.indexOf(arr[i]) == -1){
        unique_array.push(arr[i])
    }
}
return unique_array
}
ngOnDestroy(): void {
    $.fn['dataTable'].ext.search.pop();
}

filterSelectbox(){
    $.fn['dataTable'].ext.search.push((settings, data, dataIndex) => {
      const unitData = data[1];
      if (this.unit11 != undefined && this.unit11 != ""){
        if (unitData == this.unit11  || this.unit11 == undefined) {
          return true; 
         }
         else{
           if (this.unit11 == "All")
              return true;
          else
            return false;  
         }
      }
      else
        return true;
})
  this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
    dtInstance.draw();
  });
}


}