Ag-grille filtre externe en 2 angulaires, présente des filtres, mais pas la grille de mise à jour

Question

app.component.html

<div class="inlineBlock"> 
    <select [(ngModel)]="portId" id="portDropdownMenu" (change)="externalFilterChanged()"> 
     <option *ngFor="#portId of portIds">{{portId}}</option> 
    </select> 
</div> 

<div class="container"> 
    <ag-grid-ng2 #agGrid 
       [gridOptions]="gridOptions" 
       [columnDefs]="myColumnDefs" 
       [rowData]="myRowData" 
       enableColResize 
       rowSelection="multiple" 
       enableSorting 
       enableFilter 
       [isExternalFilterPresent]="isExternalFilterPresent" 
       [doesExternalFilterPass]="doesExternalFilterPass" 
       rowHeight="30" 
       headerHeight="40" 
       enableRangeSelection 
       suppressContextMenu 
       suppressMenuColumnPanel 
       rowGroupPanelShow="always" 
       rememberGroupStateWhenNextData 
       groupDefaultExpanded="-1" 
       groupHideGroupColumns 
       groupUseEntireRow 
       (modelUpdated)="onModelUpdated()" 
       (filterChanged)="onFilterChanged()"> 
    </ag-grid-ng2> 
</div> 

app.component.ts

public isExternalFilterPresent() { 
     return this.portType != "All Ports"; 
} 

public doesExternalFilterPass(node) { 
    switch (this.portType) { 
     case "1": return node.data.Port === "1"; 
     case "2": return node.data.Port === "2"; 
     case "3": return node.data.Port === "3"; 
     default: return true; 
    } 

} 

public externalFilterChanged() { 
    var newValue = (<HTMLInputElement>document.getElementById("portDropdownMenu")).value 
    this.portType = newValue; 
    this.gridOptions.api.onFilterChanged(); 
} 

public onFilterChanged() { 
    if (this.gridOptions.api.isAnyFilterPresent()) { 
     this.gridOptions.api.setRowData(this.gridOptions.rowData); 
     this.gridOptions.api.refreshView(); 
    } 
    console.log("filter changed ..."); 
} 

Par console.log (this.gridOption .isAnyFilterPresented()), je remarque que le filtre existe quand le menu déroulant est mis à jour. Cependant, la grille ne se met pas à jour en fonction du filtre externe.

Je suis certain que "isExternalFilterPresent()" et "doesExternalFilterPass (node)" s'exécutent et fournissent la valeur de retour correcte. Je crois comprendre que l'aggrille s'occupera du reste, mais ce n'est pas le cas. Une idée?

Answer 1

Une mise à jour sur cette question:

Le problème pour moi est la portée de 2 variables angulaires. "this.portType" n'est pas défini dans "isExternalFilterPresent()" et "doesExternalFilterPass (node)" même si j'ai été initialisé correctement dans le constructeur. Mon problème est de récupérer le portType de html chaque fois que ces deux fonctions sont appelées.

Ce n'est pas une bonne solution, j'espère que quelqu'un pourrait trouver quelque chose de mieux. Et si quelqu'un pouvait expliquer pourquoi la variable portType n'était pas définie?

Answer 2

il existe une solution à ce problème.

déclare les deux fonctions: isExternalFilterPresent, doesExternalFilterPass dans le script type,

obtenir une instance des gridOptions,

private gridOptions:GridOptions; 

et dans le constructeur:

this.gridOptions = <GridOptions>{}; 

puis

this.gridOptions.isExternalFilterPresent = this.isExternalFilterPresent.bind(this); 
    this.gridOptions.doesExternalFilterPass = this.doesExternalFilterPass.bind(this); 

maintenant, vous pourrez accéder aux variables avec les fonctions du composant:

this.myVariable 

description complète du problème + solution: https://github.com/ceolter/ag-grid-ng2/issues/121

Answer 3

doesExternalFilterPass et isExternalFilterPresent sont une fonction de flèche si this n'a pas de sens à l'intérieur ces fonctions. Ci-dessous, comment ils doivent être utilisés -

/** 
    * This property is an arrow function, which binds `this` to the Angular Component. 
    * It's necessary otherwise `this` is undefined inside the function because 
    * it's not called as a method of the class by the Datagrid. 
    * It's called as `doesExternalFilterPass(node)` and not as `component.doesExternalFilterPass(node)` 
    */ 
    doesExternalFilterPass = (node: RowNode): boolean => { 
    return node.data.currency >= this.currencyFilter; 
    } 

Source - https://github.com/ceolter/ag-grid-angular/issues/121