2017-05-17 38 views
1

私は、angle2でLouis Linによって角度データテーブルを実装しようとしています。typeError:未定義のプロパティ 'dtInstance'を読み取ることができません

私はDatatableのインスタンスを取得しようとしましたtypeError:未定義ののプロパティ 'dtInstance'を読み取ることができません。

私は以下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']) 
    ); 
    } 
} 
} 

答えて

1

は、あなたはそれがデータを持っている前に、あなたはそれを持っていることを確認するpromiseを使用することができdatatableElementを使用しているように見える私のコードですデータ。以下のような約束を使用してみました

+0

、 'ngOnInit():ボイド{ this.dtOptions = this.http.get( 'データ/ dtOptions.json') .toPromise() .then(応答=> response.json ()) .catch(this.handleError); } ' しかし、それは与えている、プロミスは無効な型に割り当てることができません –

+0

私は約束を使用する方法の例です、これはあなたのために働くことを期待https://jsfiddle.net/0bghsjf8/ –

+0

あなたのコードはangular1、私はangular2を使用しています、あなたはangular2を使用している場合の例を表示できますか? –

関連する問題