Angular5: скрыть строки ag-gird в зависимости от условия

Самый простой способ сделать это — сначала отфильтровать данные по значению флага.

const filteredData = this.data.filter(item => !item.flag);

Затем установите этот filteredData как данные сетки

this.gridOptions.setRowData(this.filteredData);

Надеюсь, это сделает необходимое

Несмотря на то, что мы можем использовать api.setRowData(newData) для явного обновления/удаления ваших данных, этот метод существенно сбрасывает всю вашу сетку. Согласно документация это приводит к следующему:

the grid discards all previous selections and filters, and completely overwrites the old data with the new. This was the first way the grid worked and is the most 'brute force' way.

Таким образом, я бы порекомендовал вам использовать transaction.remove вместо этого. Согласно документация, вы можете либо указать rowNodeId для удаления строк, либо мы можем удалить строки, используя строки на основе ссылки на объект.

Этот метод предпочтительнее, т.

The grid keeps all active sorting, grouping and filtering, including updating to reflect the changes in the data should the sorting, grouping or filtering be impacted.

Во-первых, мы можем получить список объектов, которые необходимо удалить. Затем мы используем api.updateRowData(transaction) для выполнения транзакции для обновления данных строки, чтобы эти строки были удалены.

const removeData = this.data.filter(item => item.flag);
this.gridApi.updateRowData({ remove: removeData });

Я создал рабочая демонстрация, чтобы проиллюстрировать приведенное выше поведение.

то, что вы хотите, это:

this.gridOptions = {
  // is always present, so return true
  isExternalFilterPresent: function() { 
    return true; 
  },

  // return true if flag=true
  doesExternalFilterPass: function(rowNode) { 
    return rowNode.data.flag; 
  }
};

см. Документы ag-Grid для более подробной информации

Если вы хотите фильтровать более динамично, вы можете использовать метод привязки

this.gridOptions = {
  // is always present, so return true
  isExternalFilterPresent: function() { 
    return true;
  }
}

ngOnInit() {
  this.gridOptions.doesExternalFilterPass = this.isVisible.bind(this)
}

isVisible(rowNode): boolean {
  // Write your logic. You can use rowNode and all component valiables.
}