Как удалить пустые столбцы из таблицы данных углового материала? - PullRequest
Новая
       22

Как удалить пустые столбцы из таблицы данных углового материала?

1 голос
/ 13 мая 2019

Я создал таблицу данных, в которой в некоторых столбцах есть пустые данные, я хотел бы создать переключатель, который скрывает пустые столбцы.

Я ищу концепцию или обходной путь, каким я являюсьНовое в Angular.

После нажатия на тумблер столбцы должны скрыться.

I want to hide Product manager, content manager, etc.

.subscribe(campaignListResponse => {
        this.tableFullData = Object.values(campaignListResponse);
        this.copyTableFullData = JSON.parse(JSON.stringify(campaignListResponse));
        this.dataSource = new MatTableDataSource<any>(this.tableFullData);

        this.dataSource.filterPredicate = (data, filters) => {
          const matchFilter = [];
          const filterArray = filters.split(',');
          const columns = [data.campaign_id, data.campaign.bu, data.campaign.executing_team, data.campaign.campaign_quarter,
            data.campaign.diamond, data.campaign.campaign_imt, data.campaign.campaign_code, data.campaign.campaign_manager,
            data.campaign.campaign_lead_offer, data.campaign.campaign_year, data.campaign.countries_covered,
            data.created_by];
            filterArray.forEach(filter => {
            const customFilter = [];
            columns.forEach(column => customFilter.push(column.toLowerCase().includes(filter)));
            matchFilter.push(customFilter.some(Boolean)); // OR
          });
          return matchFilter.every(Boolean); // AND
        }

        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      });
  }

1 Ответ

0 голосов
/ 13 мая 2019

Вы должны реализовать функцию, которая фильтрует отображаемые вами столбцы mat-table. Я полагаю, у вас есть такая строка в вашем коде: 

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

Затем в вашем компоненте вам нужно написать функцию, которая фильтрует displayedColumns на основе фактических данных, которые вы показываете.

Это может выглядеть примерно так (в зависимости от вашей модели данных и т. Д.): 

public toggle(event: MatSlideToggleChange) {
  if (event.checked) {
    const columns = this.getEmptyColumns();
    this.displayedColumns = this.defaultColumns.filter(col => !columns[col]);
  } else {
    this.displayedColumns = this.defaultColumns;
  }
}

public getEmptyColumns(): {[key: string]: boolean} {
  const columns = {};

  this.defaultColumns.forEach(col => {
    columns[col] = this.dataSource.every(element => {
      return !element[col];
    });
  });

  return columns;
}

Функция toggle запускается нашим mat-slide-toggle и фильтрует столбцы, которые отображаются на основе данных. Функция getEmptyColumns проверяет для каждого свойства, являются ли все строки пустыми, и возвращает объект со свойством в качестве ключа и значением, является ли столбец пустым. На основании этого мы затем фильтруем столбцы, которые мы хотим отобразить.

Выезд это stackblitz. Это простой пример того, как вы можете скрыть столбцы empy с переключателем и должен дать вам представление о том, как реализовать это для вашего решения.

Примечание. Похоже, что ваши данные являются вложенными. Это означает, что вам придется реализовать некоторую дополнительную логику при извлечении пустых столбцов, поскольку вы не можете напрямую получить доступ к данным с помощью вложенных свойств.

...