角度2中のAgグリッド外部フィルタ、フィルタの提示が、グリッドは

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にconsole.logにより

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

（this.gridOptionを更新しません.isAnyFilterPresented（））、ドロップダウンメニューが更新されたときにフィルタが存在することがわかりました。ただし、グリッドは外部フィルタに従って更新されません。

「isExternalFilterPresent（）」と「doesExternalFilterPass（node）」が正しく実行され、正しい戻り値が提供されていることを確認しています。私の理解では、グリッドは残りの部分を処理しますが、それをやっていません。何か案が？

Answer 1

この問題のアップデート：

私の問題は、角度2の変数の範囲です。 "this.portType"は "isExternalFilterPresent（）"と "doesExternalFilterPass（node）"では未定義ですが、コンストラクタで正しく初期化されています。私の修正は、これら2つの関数が呼び出されるたびにhtmlからportTypeを取得することです。

それは良い修正ではありません、うまくいけば誰かが何か良いものを考え出すことができました。誰かがなぜportType変数が定義されていなかったのか説明できたら？

Answer 2

この問題の解決方法があります。

二つの機能を宣言する：型スクリプトにisExternalFilterPresent、doesExternalFilterPass、

は

private gridOptions:GridOptions; 

とコンストラクタで、gridOptionsのインスタンスを得る：次いで

this.gridOptions = <GridOptions>{}; 

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

今、あなたはそれらの関数の内部で、コンポーネントの変数にアクセスすることができるようになります：

this.myVariable 

完全な記述問題+解決策： https://github.com/ceolter/ag-grid-ng2/issues/121

Answer 3

doesExternalFilterPassとisExternalFilterPresentは矢印の関数であるので、thisは、内部には意味がありませんこれらの機能。以下は、彼らが使用する方法である -

/** 
    * 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; 
    } 

ソース - https://github.com/ceolter/ag-grid-angular/issues/121