`TypeError：无法读取属性'然后'未定义` -

Question

我正在尝试实现angular tabledata的dtTrigger 。 这是我的ts代码：

import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';
import { map } from 'rxjs/operators';
import { Subject } from 'rxjs';

class Person {
    id: number;
    firstName: string;
    lastName: string;
}

class DataTablesResponse {
    data: any[];
    draw: number;
    recordsFiltered: number;
    recordsTotal: number;
}

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

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



    showmenuOne:boolean = false;
    showmenuTwo:boolean = false;
    showmenuThr:boolean = false;

    tableData =  [
    {
      "id": 860,
      "firstName": "Superman",
      "lastName": "Yoda",
      "category": "Academic Honesty"
    },
    {
      "id": 870,
      "firstName": "Foo",
      "lastName": "Whateveryournameis",
      "category": "Setup & configuration"
    },
    {
      "id": 590,
      "firstName": "Toto",
      "lastName": "Titi",
      "category": "Academic Honesty"
    },
    {
      "id": 803,
      "firstName": "Luke",
      "lastName": "Kyle",
      "category": "Academic Honesty"
    },
    {
      "id": 474,
      "firstName": "Toto",
      "lastName": "Bar",
      "category": "Academic Honesty"
    },
    {
      "id": 476,
      "firstName": "Zed",
      "lastName": "Kyle",
      "category": "School preparation"
    },
    {
      "id": 464,
      "firstName": "Cartman",
      "lastName": "Kyle",
      "category": "Academic Honesty"
    },
    {
      "id": 505,
      "firstName": "Superman",
      "lastName": "Yoda",
      "category": "Setup & configuration"
    },
    {
      "id": 308,
      "firstName": "Louis",
      "lastName": "Kyle",
      "category": "Academic Honesty"
    },
    {
      "id": 184,
      "firstName": "Toto",
      "lastName": "Bar",
      "category": "Student Management"
    },
    {
      "id": 411,
      "firstName": "Luke",
      "lastName": "Yoda",
      "category": "School preparation"
    },
    {
      "id": 154,
      "firstName": "Luke",
      "lastName": "Moliku",
      "category": "Academic Honesty"
    },
    {
      "id": 623,
      "firstName": "Someone First Name",
      "lastName": "Moliku",
      "category":"School preparation"
    },
    {
      "id": 499,
      "firstName": "Luke",
      "lastName": "Bar",
      "category":"Setup & configuration"
    },
    {
      "id": 482,
      "firstName": "Batman",
      "lastName": "Lara",
      "category": "Academic Honesty"
    },
    {
      "id": 255,
      "firstName": "Louis",
      "lastName": "Kyle",
      "category": "Access & inclusion"
    },
    {
      "id": 772,
      "firstName": "Zed",
      "lastName": "Whateveryournameis",
      "category": "Access & inclusion"
    }
  ]


    datas:any;

    currentCategory:string;
    // persons: Person[];
    categoryListCopy = null;
    tableDataCopy=null;

    categoryList = [
        "Select All",
        "Academic Honesty",
        "Setup & configuration",
        "School preparation",
        "Student Management",
        "Access & inclusion"
    ];

    constructor(private http: HttpClient) {}

    getDatas(){
       return this.http.get('data/data.json').subscribe(values =>  {
           this.datas = values;
       });
    }

    ngOnInit() {

        this.categoryListCopy = this.categoryList;
        this.tableDataCopy = this.tableData;

        const that = this;
        this.dtOptions = {

            columns:[{
                data: 'id'
            }, {
                data: 'firstName'
            }, {
                data: 'lastName'
            }],
            pagingType: 'full_numbers',
            pageLength: 10,
            serverSide: false,
            processing: true,
            data: this.tableData

        };



        }

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

             this.dtTrigger.next();
        }

        showMenu(menu){
            this[menu] = !this[menu];
        }

        onFilterChange(event:string){

            this.categoryList = this.categoryListCopy;
            const result = this.categoryList.filter((data) =>  JSON.stringify(data).toLowerCase().indexOf(event.toLowerCase()) !== -1);
            this.categoryList = result;

        }

        changeCategory(category:string) {
            this.currentCategory = category;
        }

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

        applyFilter() {
            this.tableData = this.tableDataCopy;
            let array = [];
            array.push(this.currentCategory);
            const result = this.tableData.filter(x => array.includes(x.category));
            this.showMenu('showmenuOne');

            console.log('result', result);

            this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
                // Destroy the table first
                dtInstance.destroy();
                this.tableData = result; //updating data
                // Call the dtTrigger to rerender again
                this.dtTrigger.next();
            });

        }

    }

在控制台中获取错误：

TypeError: Cannot read property 'then' of undefined - 无法理解这里的错误。 任何人帮助我？