Question

我制作了一个数据表，其中某些列包含空白数据，我想创建一个隐藏空列的切换器。

我正在寻找新的Angular概念或解决方法。

单击切换开关后，列应隐藏。

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

Answer 1

您必须实现过滤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函数会检查每个属性是否所有行都为空，并返回一个以该属性为键的对象以及该列是否为空的值。基于此，我们然后过滤要显示的列。

退房 this 堆积如山。这是一个如何隐藏empy列的简单示例拨动一下，应该会给您一个思路，以解决该问题。

注意：看来您的数据是嵌套的，这意味着在检索空列时您将必须实现一些其他逻辑，因为您不能直接使用嵌套的属性访问数据。

如何从Angular Material数据表中删除空列？

1 个答案: