ag 使用角度和打字稿的网格搜索数据答案

【问题标题】：agGrid searching data using angular2 and typescriptag 使用角度和打字稿的网格搜索数据
【发布时间】：2016-07-20 06:16:59
【问题描述】：

如何在我的 agGrid 组件中设置过滤。我从 agGrid 中看到了一个示例，但它是用 javascript 编写的。 https://www.ag-grid.com/angular-grid-filtering/index.php

但我似乎无法使用下面的 ts 代码完成这项工作。

agGrid.component.ts

import {Component} from 'angular2/core';
import {AgGridNg2} from 'ag-grid-ng2/main';
import {GridOptions} from 'ag-grid/main';

import 'ag-grid-enterprise/main';

@Component({
    selector: 'app',
    templateUrl: 'app/partials/agGrid/agGrid.html',
    directives: [AgGridNg2]
})
export class AgGridComponent {

    columnDefs = [
        { headerName: "Contact Name", field: "make" },
        { headerName: "Company Name", field: "model" },
        {
            headerName: "Last Event",
            field: "price",
            cellClass: 'rightJustify',
            cellRenderer: function (params: any) {
                return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
            }
        },
        { headerName: "Contact Email", field: "model" },
        { headerName: "Work Phone", field: "model" }
    ];
    // put data directly onto the controller
    rowData = [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxter", price: 72000 }
    ];

    gridOptions = {
        columnDefs: this.columnDefs,
        rowData: null,
        enableFilter: true
    };



    values='';
    onKey(event:any) {
        this.values = event.target.value;
        this.gridOptions.columnDefs.setQuickFilter(this.values);
    }

    searchValue='';

}

grid.html

<input placeholder="Filter..." type="text"
	   [value]="searchValue"
	   (input)="searchValue = $event.target.value"
/>

<ag-grid-ng2
		class="ag-fresh"
		enable-sorting
		enable-filter
		style="height: 300px" 
		[gridOptions]="gridOptions" 
		(cellClicked)="onCellClicked()" 
		[columnDefs]="columnDefs"
		[rowData] = "rowData"> 
</ag-grid-ng2>

【问题讨论】：

标签： typescript angular ag-grid

【解决方案1】：

将 ngModel 变量绑定到“quickFilterText”属性。 “quickFilterText”应该在未来改为“quickFilter”。

<input type="text" 
    [(ngModel)]="searchValue" placeholder="quick filter..." /> 
<ag-grid-angular  
    class="data-grid ag-theme-balham"
    [rowData]="rowData | async" 
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [quickFilterText]="searchValue"
    >
</ag-grid-angular>

【讨论】：

这种方式简洁明了，因为不需要额外的代码。只需将 quickFilterText 或 quickFilter（取决于 ag-grid 版本）添加到 ag-grid HTML 元素并将其绑定到您的 searchValue 属性。而已。不需要监听 keyup、oninput、change 或任何其他事件。

【解决方案2】：

我猜你已经解决了这个问题，但对于那些目前正在寻找的人，你可以将输入框双向绑定到代码中的变量。

您的 HTML 将如下所示：

<input type="text" (keyup)="onQuickFilterChanged()" 
    [(ngModel)]="quickSearchValue" placeholder="quick filter..." />

你的 TS 代码是这样的：

quickSearchValue: string = '';

private onQuickFilterChanged() {
    this.gridOptions.api.setQuickFilter(this.quickSearchValue);
}

希望这会有所帮助。

【讨论】：