如何将属性值更改为角度4指令

我正试图在我的角度4应用程序中实现Datatable。我创建了一个指令，数据表正在填充。如何将属性值更改为角度4指令

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

如果在指令中使用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); 
    } 

}

希望我是在清楚我的问题。

总之，如何检测指令输入的变化。

来源

2017-10-15 Alaksandar Jesus Gene

的ngOnChanges函数的签名就像是

ngOnChanges(changes: SimpleChanges) { 

}

或者是你的后伪代码？您必须将SimpleChanges添加到您的导入。

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

来源

2017-10-15 07:59:37 zgue

我是有工作的。我需要在组件中使用setTimeout来重新定义输入变化。将发布工作代码。谢谢你的努力。 –

我在SimpleChanges上获得了您的观点。问题是我在我的init和onchange上调用this.setTable。所以数据表被调用两次。为什么ngOnchange和ngOnInit同时被触发。 –

第一个被触发的事件是ngOnChange，然后是ngOnInit。你可以在这里找到洞序列https://angular.io/guide/lifecycle-hooks – zgue

感谢您的所有努力。需要将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(); 
    } 

    } 


}

来源

2017-10-15 08:29:12

由于数据表初始化两次，因此在ngOnInit上删除this.setTable。 –

如何将属性值更改为角度4指令

回答

相关问题