Невозможно прочитать свойство then для неопределенного в ViewComponent

Question

Я пытаюсь использовать угловые таблицы данных, где я хочу отфильтровать столбец таблиц данных. Datatables в порядке, но когда я пытаюсь выполнить поиск по столбцу, выдается странная ошибка

ng: ///AppModule/ViewComponent_Host.ngfactory.js: 5 ОШИБКА TypeError: Невозможно прочитать свойство 'then' из undefined в

ViewComponent.push../src/app/view/view.component.ts.ViewComponent.ngAfterViewInit (main.js:891)
    at callProviderLifecycles (vendor.js:58335)
    at callElementProvidersLifecycles (vendor.js:58309)
    at callLifecycleHooksChildrenFirst (vendor.js:58299)
    at checkAndUpdateView (vendor.js:59235)
    at callViewAction (vendor.js:59467)
    at execEmbeddedViewsAction (vendor.js:59430)
    at checkAndUpdateView (vendor.js:59227)
    at callViewAction (vendor.js:59467)
    at execComponentViewsAction (vendor.js:59409)

Моя функция view.ts здесь.

import { Component, AfterViewInit, OnDestroy, OnInit, ViewChild  } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ProjectService } from '../project.service';
import { Router } from '@angular/router';
import { project } from '/home/nineleaps/Desktop/rms/rms/src/app/project.model'
import { DataTableDirective} from 'angular-datatables';
import { Subject } from 'rxjs';
//import 'rxjs/add/operator/map';
declare var $;

@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit, AfterViewInit{

  public projects: any = [];
  //@ViewChild('productsTable') Table;
  //public dataTable: any;

  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;
  dtTrigger: Subject<any>= new Subject();
  dtOptions: DataTables.Settings = {};

  constructor(private projectService:ProjectService, private routes:Router) { }

  ngOnInit(): void {


    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 4,
      //retrieve: true,
   // paging: false
    }

    this.loadProjects()   ;

    // this.datatableElement.ngOnDestroy();
    // //this.dtTrigger.next();
   }

  ngAfterViewInit(): void {
    //this.dtTrigger.unsubscribe();

    //this.dtTrigger.next();
   // this.loadProjects();


    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {



      //dtInstance.destroy();
      this.dtTrigger.next();

      dtInstance.columns().every(function () {
        const that = this;
        $('input', this.footer()).on('keyup change', function () {
          if (that.search() !== this['value']) {
            that
              .search(this['value'])
              .draw();
          }
        });
      });

    });

  }

  loadProjects(){
    this.projectService.getProject().then(
        productData => {
          this.projects = productData;
        //   this.dataTable = $(this.Table.nativeElement);

        //   setTimeout(()=>{this.dataTable.DataTable();}, 50);
        //  // this.dataTable.DataTable.rows( {search:'removed'} ).nodes();
        this.dtTrigger.next();


        }
    );
  }

  // ngOnDestroy(): void {
  // //Do not forget to unsubscribe the event
  // this.dtTrigger.unsubscribe();
  //  }

  getNavigation(link, id){
    if(id === ''){
        this.routes.navigate([link]);
    } else {
        this.routes.navigate([link + '/' + id]);
    }
}

}

МОЙ ИСТОЧНИК: Угловые таблицы данных Я уже просмотрел множество вопросов SO, но безрезультатно. Что я делаю неправильно? Это как-то связано с крючком Lifecycle от Angular?

• Элемент списка