Question

我正在尝试在我的angular 4应用程序中实现Datatable。我创建了一个指令，数据表正在填充。

现在，如果我删除表数据，我可以看到行的视觉消失但数据表仍然保存我的数据。它的解决方案是指令应该检测数据的变化。

如果在指令中使用setInterval会因为它将运行无限循环而成本很高。

或者我得到的另一个想法是创建属性绘制和重绘。但同样问题是如何在没有事件的情况下跟踪输入属性的变化。

HTML代码

<table class="table table-striped table-bordered" appDatatable [data]="roles" *ngIf="roles && roles.length">
  <thead>
    <tr>
      <th>Role</th>
      <th>Description</th>
      <th>Created By</th>
      <th>Created At</th>
      <th>Updated By</th>
      <th>Updated At</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let role of roles">
      <td>{{role.name}}</td>
      <td>{{role.description}}</td>
      <td>{{role.created_by}}</td>
      <td>{{role.created_at | date}}</td>
      <td>{{role.updated_by}}</td>
      <td>{{role.updated_at}}</td>
      <td class="text-center">
        <button class="btn btn-primary btn-sm" type="button" (click)="update(role)">
          <span class="fa fa-pencil"></span>
        </button>
        <button class="btn btn-danger btn-sm" type="button" (click)="remove(role)">
          <span class="fa fa-trash"></span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

指令代码

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';

declare var jQuery:any;

@Directive({
  selector: '[appDatatable]'
})
export class DatatableDirective implements OnChanges {

    table:any;

  @Input() data:any;

  constructor(private el: ElementRef) { 
    this.initializeDataTable();

  }

   initializeDataTable(){
        setTimeout(()=>{
           this.table =  jQuery(document).find(this.el.nativeElement).DataTable();
           setInterval(()=>{this.watchData();}, 5000);
       });
  }

  watchData(){
   //I can watch the data change here. But is it a costly solution?
  }

  ngOnChanges(){ // not working
    console.log(this.data);
  }

}

希望我的问题很明确。

简而言之，如何检测指令输入的变化。

Answer 1

ngOnChanges功能的签名就像

ngOnChanges(changes: SimpleChanges) {

}

或者你的帖子伪代码？您必须在导入中添加SimpleChanges。

import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';

Answer 2

感谢您的所有努力。需要将setTimeout放在component.js文件中。

<强> roles.component.ts

onRemoveConfirm(row){

    _.remove(this.roles, (role)=> role === row);
    this.setDatatable();  

  }

setDatatable(){
     this.drawDatatable = false;
     setTimeout(() => { // added this setTimeout 
      this.drawDatatable = true;  
    });
   }

<强> role.component.html 这里不是传递数据，而是使用布尔信息来绘制表格。

<table class="table table-striped table-bordered" appDatatable [draw]="drawDatatable">

<强>指令

import { Directive, ElementRef, Input, OnInit, OnChanges } from '@angular/core';

declare var jQuery:any;

@Directive({
  selector: '[appDatatable]'
})
export class DatatableDirective implements OnInit, OnChanges {

    table:any;

  @Input() draw:boolean;

  constructor(private el: ElementRef) { 


  }

  ngOnInit(){
    this.setTable();
  }

  ngOnChanges(){
      this.setTable();
  }

   initializeDataTable(){
        setTimeout(()=>{
           this.table =  jQuery(document).find(this.el.nativeElement).DataTable();
       });
  }

  setTable(){
     if(!this.draw){
      if(this.table){
        this.table.destroy();
        this.table = undefined;
      }
      return;
    }
    if(!this.table){
      this.initializeDataTable();
    }

  }


}

如何将属性值更改传递给angular 4指令

2 个答案: