如何將屬性值更改爲角度4指令

Question

我正試圖在我的角度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(); 
    } 

    } 


}