如何使用 ag 网格根据两个下拉选择显示和隐藏列答案

【问题标题】：How to display and hide columns based on the two dropdown selection using ag grid如何使用 ag 网格根据两个下拉选择显示和隐藏列
【发布时间】：2020-06-30 10:35:06
【问题描述】：

基本上，我有两个下拉列表 a 和 b。基于这两个下拉列表的组合，需要使用 ag grid 隐藏/显示列。

例如：如果我在下拉列表 a 中选择“xyz”，在下拉列表 b 中选择“123”，则将显示 2 列。同样，如果在下拉列表 b 中选择下拉列表“ghj”和“456”，则会选择另外 3 列，并且前 2 列将不再可见/可用。

我可以使用 if else 条件，但我需要检查所有可能的组合。有没有简单的方法？

dropdown a
     onReportingType(e) {
        // console.log(e);
        this.reportData = e;
        this.reportSelArr.push(this.reportData);
        console.log(this.reportSelArr);
    }
dropdown b
    onDataPoint(e) {
        console.log(e);
        this.dataPointData = e;
        this.dataPointSelArr.push(this.dataPointData);
        console.log(this.dataPointSelArr);
        this.addRatingCol();
    }

现在申请条件

    addRatingCol() {
    // console.log(this.reportSelArr);
    // console.log(this.dataPointSelArr);
    for (let i = 0; i < this.reportSelArr.length; i++) {
        for (let j = 0; j < this.dataPointSelArr.length; j++) {
            if (this.reportSelArr[i].reportingTypeName === 'Outstanding') {
                if (this.dataPointSelArr[j].dataPointName === 'Rating') {
                    this.gridColumnApi.setColumnsVisible(['newRatingName', 'newRatingReleaseDate'], true);
                    return true;
                } else if (this.dataPointSelArr[j].dataPointName === 'Rating Outlook') {
                    this.gridColumnApi.setColumnsVisible(['newOutlookName', 'newOutlookDate', 'outlookEndDate'], true);
                } else if (this.dataPointSelArr[j].dataPointName === 'Rating Watch') {
                    this.gridColumnApi.setColumnsVisible(['newRatingWatchName', 'newRatingWatchDate', 'ratingwatchEndDate'], true);
                }
            }
        } // end of the for loop
    }
if (this.addCol === true && this.addReport === true){
    this.gridColumnApi.setColumnsVisible(['newRatingName', 'newRatingReleaseDate'], true);
    } else {
    this.gridColumnApi.setColumnsVisible(['newRatingName', 'newRatingReleaseDate'], false);
    }
}

【问题讨论】：

标签： drop-down-menu angular7 ag-grid show-hide

【解决方案1】：

如果你使用的是 ES6..

我宁愿对第一个循环使用过滤器，而不是 2 个 for 循环，并查找它是否具有未完成的报告类型。

const outstanding = this.reportSelArr.filter(elem => elem.reportingTypeName === 'Outstanding')

然后我将使用过滤器的返回值来确定是否运行可以通过映射的第二个 for 循环。

if (outstanding) {
this.dataPointSelArr.map(elem => {
const { dataPointName } = elem
 switch(dataPointName) {
   case 'Rating': {
      //statements;
      break;
   }
   case 'Rating Outlook': {
      //statements;
      break;
   }
   case 'Rating Watch':{
//statements;
      break;
}
   default: {
      //statements;
      break;
   }
}
    
  })
}

【讨论】：