typeError: Cannot read property 'dtInstance' of undefined

Question

我正在尝试使用 angular2 实现 angular-Louis Lin 的数据表。

当我尝试获取 Datatable 的实例时，它给出了 typeError: Cannot read 属性 'dtInstance' of undefined .

我指的是 here

文档中的步骤

下面是我的代码

import { Component, OnInit,AfterViewInit,ViewChild } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Rx';
import { DataTableDirective } from 'angular-datatables';
import { EmployeeService } from '../services/employee.service';
import { Employee} from "app/services/employee";
@Component({
selector: 'app-employees',
templateUrl: './employees.component.html',
styleUrls: ['./employees.component.css']
})

 export class EmployeesComponent implements OnInit {  
 employees: Employee[];
 private datatableElement: DataTableDirective;
 dtOptions: DataTables.Settings = {};
 constructor(
 private employeeservice:EmployeeService,
 private route: ActivatedRoute,
 private router: Router,
 ) { 

 }
 ngOnInit(): void {
 this.getEmployee(); 
 this.dtOptions = {
  paginationType: 'full_numbers',
  displayLength: 5
  };
 }
displayToConsole(datatableElement: DataTableDirective): void 
{
datatableElement.dtInstance.then((dtInstance: DataTables.Api) => 
console.log(dtInstance));
} 
getEmployee(){
this.employeeservice.getEmployees()
.subscribe(
    employees =>{ 
        this.employees = employees; 
        console.log(this.employees);
    (error:Response) => console.log(error)
  },
 )     
}

 deleteEmployee(employee){
 if (confirm("Are you sure you want to delete Employee ?")) {
 console.log(employee.id);
  var index = this.employees.indexOf(employee);
  this.employees.splice(index, 1);

  this.employeeservice.deleteEmployee(employee.id)
    .subscribe(
      data =>{
        this.emp_data = employee;
      },
      err => {
        alert("Could not delete employee.");
        // Revert the view back to its original state
        this.employees.splice(index, 0, employee);
      },
      () => this.router.navigate(['/employees'])
      );
  }
 }
}

Answer 1

看起来你在使用 datatableElement 之前它有数据，你可以使用 promise 来确保它有数据。

typeError: Cannot read property 'dtInstance' of undefined

typeError: Cannot read property 'dtInstance' of undefined

angular-datatables

angular2-services

angular