Question

我尝试在要过滤数据表列的地方使用角度数据表。 Datatables很好，但是当我尝试通过列搜索时，抛出了

的奇怪错误

ng：///AppModule/ViewComponent_Host.ngfactory.js：5错误TypeError：无法读取未定义的属性“ then” 在

ViewComponent.push../src/app/view/view.component.ts.ViewComponent.ngAfterViewInit (main.js:891)
    at callProviderLifecycles (vendor.js:58335)
    at callElementProvidersLifecycles (vendor.js:58309)
    at callLifecycleHooksChildrenFirst (vendor.js:58299)
    at checkAndUpdateView (vendor.js:59235)
    at callViewAction (vendor.js:59467)
    at execEmbeddedViewsAction (vendor.js:59430)
    at checkAndUpdateView (vendor.js:59227)
    at callViewAction (vendor.js:59467)
    at execComponentViewsAction (vendor.js:59409)

我的view.ts函数在这里。

import { Component, AfterViewInit, OnDestroy, OnInit, ViewChild  } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ProjectService } from '../project.service';
import { Router } from '@angular/router';
import { project } from '/home/nineleaps/Desktop/rms/rms/src/app/project.model'
import { DataTableDirective} from 'angular-datatables';
import { Subject } from 'rxjs';
//import 'rxjs/add/operator/map';
declare var $;

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

  public projects: any = [];
  //@ViewChild('productsTable') Table;
  //public dataTable: any;

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

  constructor(private projectService:ProjectService, private routes:Router) { }

  ngOnInit(): void {


    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 4,
      //retrieve: true,
   // paging: false
    }

    this.loadProjects()   ;

    // this.datatableElement.ngOnDestroy();
    // //this.dtTrigger.next();
   }

  ngAfterViewInit(): void {
    //this.dtTrigger.unsubscribe();

    //this.dtTrigger.next();
   // this.loadProjects();


    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {



      //dtInstance.destroy();
      this.dtTrigger.next();

      dtInstance.columns().every(function () {
        const that = this;
        $('input', this.footer()).on('keyup change', function () {
          if (that.search() !== this['value']) {
            that
              .search(this['value'])
              .draw();
          }
        });
      });

    });

  }

  loadProjects(){
    this.projectService.getProject().then(
        productData => {
          this.projects = productData;
        //   this.dataTable = $(this.Table.nativeElement);

        //   setTimeout(()=>{this.dataTable.DataTable();}, 50);
        //  // this.dataTable.DataTable.rows( {search:'removed'} ).nodes();
        this.dtTrigger.next();


        }
    );
  }

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

  getNavigation(link, id){
    if(id === ''){
        this.routes.navigate([link]);
    } else {
        this.routes.navigate([link + '/' + id]);
    }
}

}

我的来源：Angular Datatables 我已经浏览了许多SO的问题，但无济于事。我究竟做错了什么？反正这与Angular的生命周期挂钩有关吗？

列表项

无法在ViewComponent读取未定义的属性'then'

0 个答案: