Использование 2 angular datatables, выдающих ошибку ObjectUnsubscribeedErrorImpl

Question

Я использую Angular компонент данных в сетках в моем приложении.

У меня есть требование показать две разные сетки на основе выбора переключателя.

Итак, я использовал 2 angular datatable controlw и, основываясь на выборе переключателя, я скрываю одну сетку и показываю другую

Сетка всегда работает для первоначального выбора, т.е. выбора переключателя по умолчанию. Но как только я выбираю другую радиокнопку и пытаюсь загрузить сетку, в первый раз она работает хорошо, но со следующего раза она выдает эту ошибку в консоли.

Хотя сетка загружается даже с этой ошибкой, ни одна из функций, css или свойств сетки не применяется. Это просто td, tr.

Я уверен, что эта ошибка возникает при первом вызове this.dtTrigger.next () в приведенном ниже методе, так как строка dtInstance.destroy () вызывает отмену подписки.

Я не уверен, как это исправить.

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

Вот мой html

<div class="scrollGrid" *ngIf="isVisible && isAcc">
  <h2 class="searchResult">Search Results :</h2>
  <table datatable [dtOptions]="dtOptions" class="row-border hover grid dataTableWidth" [dtTrigger]="dtTrigger">
    <thead>
      <tr class="gridHeader">
        <th>{{gridColumn1}}</th>
        <th>{{gridColumn2}}</th>
        <th>{{gridColumn3}}</th>
        <th>{{gridColumn4}}</th>
        <th>{{gridColumn5}}</th>
        <th>{{gridColumn6}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let group of dt">
        <td>{{{{group.Column1}}</td>
        <td>{{{{group.Column2}}</td>
        <td>{{group.Column3}}</td>
        <td>{{group.Column4 | date: 'MM/dd/yyyy hh:mm a'}}</td>
        <td>{{group.Column5}}</td>
        <td> <button class="link-button" (click)="somemethod(group.Column1,group.Column2,group.Column3)">Details</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="scrollGrid" *ngIf="isVisible && !isAcc">
  <h2 class="searchResult">Search Results :</h2>
  <table datatable [dtOptions]="dtOptions" class="row-border hover grid dataTableWidth" [dtTrigger]="dtTriggerNew">
    <thead>
      <tr class="gridHeader">
        <th>{{gridColumn1}}</th>
        <th>{{gridColumn2}}</th>
        <th>{{gridColumn3}}</th>
        <th>{{gridColumn4}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let group of dt">
        <td>{{group.Column1}}</td>
        <td>{{group.Column2}}</td>
        <td>{{group.Column3}}</td>
        <td>{{group.Column4 | date: 'MM/dd/yyyy hh:mm a'}}</td>
      </tr>
    </tbody>
  </table>
</div>

Вот весь код компонента, связанный с сеткой.

export class MyComponent implements OnInit {
  @ViewChild(DataTableDirective, {
    static: false
  }) dtElement: DataTableDirective;
  dtTrigger: Subject < any > = new Subject < any > ();
  dtTriggerNew: Subject < any > = new Subject < any > ();
  dtOptions: DataTables.Settings = {};


  radioChanged(event) {
    this.isVisible = false;
    if (this.myForm.controls.radioCategory.value === '0') {
      this.hideControlsonRadioChange();
    } else {
      this.showControlsonRadioChange();
    }
  }
  hideControlsonRadioChange() {
    this.isAcc = false;
    this.Accsubmitted = false;
    this.isDtInitialized = false;
    this.myForm.get('SomeControl').clearValidators();
    this.myForm.get('SomeControl').updateValueAndValidity();
    this.gridColumn1 = 'Name1';
    this.gridColumn2 = 'Name2';
    this.gridColumn3 = 'Name3';
    this.gridColumn4 = 'Name4';
    this.gridColumn5 = '';
    this.gridColumn6 = '';

  }
  showControlsonRadioChange() {
    this.isAcc = true;
    this.Accsubmitted = false;
    this.isDtInitialized = false;
    this.myForm.get('SomeControl').setValidators(Validators.required);
    this.myForm.get('SomeControl').updateValueAndValidity();
    this.gridColumn1 = 'Name1';
    this.gridColumn2 = 'Name2';
    this.gridColumn3 = 'Name3';
    this.gridColumn4 = 'Name4';
    this.gridColumn5 = 'Name5';
    this.gridColumn6 = 'Name6';
  }

  onSubmit() {
    this.myService.myMethod(this.searchParams).
    subscribe(res => {
        this.BindDataTable(res);
        this.blockUI.stop();
      },
      (err) => this.handleerror(err),
      () => this.ResetTable());
    this.isVisible = true;
  }
  BindDataTable(data) {
    this.dt = [];
    this.dt = $.parseJSON(data);
  }
ResetTable() {
    if (this.isDtInitialized) {
      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.destroy();
        this.dtTrigger.next();
      });
    } else {
      this.isDtInitialized = true;
      if (this.isAcc) {
        this.dtTrigger.next();
      } else {
        this.dtTriggerNew.next();
      }
    }
  }
}

Может кто-нибудь помочь мне найти, что или где я должен исправить свой код?