问题描述
我在组件中重新呈现数据表时遇到问题。我的组件有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,我还有其他具有一个数据表的组件,并且此过程可以在它们上正常工作。谢谢您的任何帮助。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)