时间戳

首页 > 解决方案 > 如何使用 ag 网格根据两个下拉选择显示和隐藏列

drop-down-menu - 如何使用 ag 网格根据两个下拉选择显示和隐藏列

问题描述

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

例如：如果我在下拉列表 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-menuangular7ag-gridshow-hide

解决方案

如果你使用的是 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;
   }
}
    
  })
}

推荐阅读