Angular5 ag-grid 'agSetColumnFilter' не показывает все значения - PullRequest
Новая
       22

Angular5 ag-grid 'agSetColumnFilter' не показывает все значения

0 голосов
/ 27 июня 2019

Я пытаюсь заполнить значение для agSetColumnFilter (ag-grid версия 17.1), но не все значения заполняются в фильтре столбцов. Мой сценарий таков: как только страница загружает сетку, отображаются только те строки, у которых result = true. Моя страница также имеет флажок Show All, поэтому, как только флажок установлен, все скрытые строки (result = false) становятся видимыми, и как только я сниму флажок, только строки с result = true будут видимый.

Теперь при загрузке страницы мой agSetColumnFilter работает нормально и показывает все значения, для которых result = true, но когда я отмечаю флажок Show All и щелкаю фильтр столбцов, значения с result = false не отображаются в фильтре .

Мой код указан ниже. Кто-нибудь может подсказать мне, где я иду не так и как показать скрытые строки в фильтре после того, как они видны. 

import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import "ag-grid-enterprise";

@Component({
  selector: "my-app",
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-balham"
      [columnDefs]="columnDefs"
      [components]="components"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
<div style="position: absolute; top: 10px; left: 0px;">
      <div>
        <input type="checkbox" (change)="toggleCheckbox($event)"/>
      </div>
    </div>
  `
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private defaultColDef;
  private components;
  private rowData: [];
  dataCopy;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: "Name",
        field: "name",
        width: 150,
        filter: "agSetColumnFilter",
        menuTabs: ['filterMenuTab']
      },
      {
        headerName: "Flag",
        field: "flag",
        width: 90,
        filter: "agNumberColumnFilter"
      }
    ];
    this.defaultColDef = {
      resizable: true,
      filter: true
    };
  }

  toggleCheckbox(event){
  if (event.target.checked) {
    this.rowData = this.dataCopy;
  } else {
    this.rowData = this.dataCopy.filter(obj => obj.flag === true);
  }
}

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.rowData = [
      {
        name: "A",
        flag: true
      },
      {
        name: "B",
        flag: false
      },
      {
        name: "C",
        flag: false
      },
      {
        name: "C",
        flag: true
      },
      {
        name: "W",
        flag: true
      },
      {
        name: "X",
        flag: false
      },
      {
        name: "Y",
        flag: false
      },
      {
        name: "Z",
        flag: true
      }
    ];
    this.dataCopy = [...this.rowData];
    this.rowData = this.dataCopy.filter(obj => obj.flag === true);
  }
}
...