Angular 7数据表加载带有“表中无可用数据”栏

Question

我在其中一个组件中使用了角度数据表，并且显示了数据，但是如果我尝试对数据表进行排序或筛选或移动到另一页，则如果我转到另一个页面，它将停止正确渲染。返回，然后正确加载。第一次加载时，它的页脚显示“表中没有可用数据”消息。这是我在组件文件上的代码， 请我做错了什么。

import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { Scbdatainfo } from 'src/app/interfaces/scbdatainfo';
import { ScbdataService } from 'src/app/services/scbdata.service';
import { ToastrService } from 'ngx-toastr';

import { DataTableDirective, DataTablesModule } from 'angular-datatables';
import { Router } from '@angular/router';

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

export class AllscbdatainfoComponent implements AfterViewInit, OnDestroy, OnInit {

  pageTitle:string = "Manage all SCB Data Information";
  loaded:boolean = false;

  scbdatainfo$ : Observable<Scbdatainfo[]>;
  scbdatainfo : Scbdatainfo[]  = [] ; 

  //the datatable variable... 
  isDtInitialized:boolean = false

  //angular-datatables options.. 
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject(); 

  @ViewChild(DataTableDirective, {static:true}) dtElement: DataTableDirective;

  constructor(
    private scbdataService:ScbdataService,
    private router:Router,
    private toastr: ToastrService
  ){}

  ngOnInit(): void {

      this.dtOptions = {   
        pageLength : 5,
        autoWidth  : true,
        pagingType : 'full_numbers',
        order      : [[ 0, 'desc']]  
      }
      this.loadScbdatainfos();
  }


  loadScbdatainfos(){    
      this.scbdataService.getScbdatainfos().subscribe(result => {
        this.scbdatainfo = result; //assign the value of the observable to the array... 
        console.log(result);
        this.loaded = true;
      });
      this.showToastMessage('data loaded successfully');
      this.rerender();
  }

  ngAfterViewInit(): void {
      this.dtTrigger.next();
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

  rerender(): void {
    if (this.isDtInitialized) {
      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.destroy();
        this.dtTrigger.next();
      });
    } else {
      this.isDtInitialized = true
      this.dtTrigger.next();
    }
  }

  editScbdatainfo(id){
    let url = `/editscbdatainfo/${id}`;
    this.router.navigate([url]);
  }

  delScbdatainfo(id:number){    
    this.scbdataService.deleteScbdatainfo(id).subscribe(result => {
      this.scbdataService.clearCache();
      this.loadScbdatainfos();
      this.rerender();
    });

  }

  showToastMessage(message:string){
      this.toastr.success(message, "Message From Server");
  }


}

在我的组件HTML文件中，我有以下代码， 请我在做什么错..谢谢

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-bordered row-border hover" style="width:100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Acc Number</th>
            <th>Tin</th>
            <th>Facility Type</th>
            <th>Business Type</th>
            <th>Profit Before Tax</th>
            <th>Total Asset</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let sdata of scbdatainfo; index as id" class="text-center">            
            <td>{{sdata.id+1}}</td>
            <td>{{sdata.acc_number}}</td>
            <td>{{sdata.tin}}</td>
            <td>{{sdata.fac_type}}</td>
            <td>{{sdata.bus_type}}</td>
            <td>{{sdata.ob_tax}}</td>
            <td>{{sdata.ob_asset}}</td>
            <td>
                <div class="btn btn-group mt-2" role="group">
                    <button type="button" class="btn btn-success" (click)="editScbdatainfo(sdata.id)"><i class="fa fa-edit"></i></button>
                    <button type="button" class="btn btn-danger" (click)="delScbdatainfo(sdata.id)"><i class="fa fa-trash"></i></button>
                </div>
            </td>
        </tr>
    </tbody>
</table>