Angular数据表无法识别dtInstance

如何解决Angular数据表无法识别dtInstance

我在组件中重新呈现数据表时遇到问题。我的组件有3个mat-tab，其中每个都有自己的数据表。 这是html代码：

<div>
<mat-tab-group animationDuration="0ms">
    <mat-tab *ngFor ="let term of terms" label="{{ term.term_name }}">
        <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
            <thead>
              <tr>
                <th>Course</th>
                <th>Time</th>
                <th>Location</th>
                <th>Price</th>
                <th>Register</th>
              </tr>
            </thead>
            <tbody *ngIf="term.exams?.length != 0">
                <tr *ngFor="let exam of term.exams">
                    <td style="width: 20%;">{{ exam.course.name }}</td>
                    <td style="width: 20%;">{{ exam.date }}</td>
                    <td style="width: 10%;">{{ exam.location }}</td>
                    <td style="width: 20%;">{{ exam.price }}</td>
                    <td style="width: 20%;"><button id={{exam.exam_id}} (click)='registerExam(exam.exam_id)' type=”button”>Register</button></td>
                </tr>
            </tbody>
            <tbody *ngIf="term.exams?.length == 0">
              <tr>
                <td colspan="3" class="no-data-available">No data!</td>
              </tr>
            <tbody>
        </table>
    </mat-tab>
</mat-tab-group>
</div>

以下是ts文件：

@Component({
  selector: 'app-register-exam',templateUrl: './register-exam.component.html',styleUrls: ['./register-exam.component.css']
})
export class RegisterExamComponent implements AfterViewInit,OnDestroy,OnInit  {
    @ViewChild(DataTableDirective,{static: false})
    dtElement: DataTableDirective;

    dtOptions: DataTables.Settings = {};
    dtInstance: DataTables.Api;

    dtTrigger: Subject<any> = new Subject<any>();

    terms;
    response: DataTablesResponse;

    constructor(
        private examsService: ExamsService,private http: HttpClient,private studentsService: StudentsService
    ) { }

    ngOnInit(): void {
        this.getTerms();
        this.dtOptions = {
            search: true
        };

    }

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

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

    getTerms(): void {

        let currentUserObject = JSON.parse(localStorage.getItem('currentUser'));

        this.studentsService.getStudentByUser(currentUserObject.id).subscribe((student: Student) => {
            localStorage.setItem('student_id',student.student_id.toString());
            this.examsService.getStudentsTerms(student.student_id).subscribe((termsList: Term[]) => {
                this.terms = termsList;
            });
        });
    }

    registerExam(id): void {
        const studentId = localStorage.getItem('student_id');
        const examRegistration: ExamRegistration = {
            exam_registration_id: null,colloquium_points: 0,exam_points: 0,grade: 5,status: 'ACTIVE',exam: { exam_id : Number(id)},student: { student_id: Number(studentId)},registered: true,deleted: false
        };
        this.examsService.registerExam(examRegistration).subscribe(res => {
            alert('Succesfully registered exam!');
            this.rerender();
        });
    }

    rerender(): void {
        const studentId = localStorage.getItem('student_id');
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
            dtInstance.destroy();
            this.examsService.getStudentsTerms(studentId).subscribe((termsList: Term[]) => {
                this.terms = termsList;
                this.dtTrigger.next();
            });
        });
    }

问题是重新呈现方法：

错误TypeError：this.dtElement.dtInstance未定义

似乎找不到要销毁的dtInstance，我还有其他具有一个数据表的组件，并且此过程可以在它们上正常工作。谢谢您的任何帮助。