Comment passer la modification de valeur d'attribut à la directive angulaire 4

Question

J'essaie d'implémenter Datatable dans mon application angulaire 4. J'ai créé une directive et la table de données est peuplée.

Maintenant, si je supprime les données de la table, je pourrais voir la disparité visuelle de la ligne, mais datatable détient toujours mes données. La solution à cela est que la directive devrait détecter les changements dans les données.

Cela coûtera-t-il cher si vous utilisez setInterval dans la directive car il exécutera une boucle infinie.

Ou l'autre idée que j'ai eu était créer un attribut dessiner et redessiner. Mais encore une fois la question comment garder une trace sur le changement dans l'attribut d'entrée sans événements s'est produite.

Code 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> 

directive code

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); 
    } 

} 

espoir que j'été clair sur ma question.

En bref, comment détecter un changement d'entrée dans une directive.

Answer 1

La signature de la fonction ngOnChanges est comme

ngOnChanges(changes: SimpleChanges) { 

} 

Ou est votre code postal pseudo? Vous devez ajouter SimpleChanges à vos importations.

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

Answer 2

Merci à tous vos efforts. Besoin de mettre setTimeout dans le fichier 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 ici au lieu de transmettre des données, ont une information booléenne pour dessiner la table.

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

directive

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(); 
    } 

    } 


}