如何使用TypeScript为静态JSON对象添加条件控制下拉选项显隐

步骤1：修改静态JSON配置，补充显示权限规则 #

给每个下拉选项补充allowedStatuses字段，定义该选项允许显示的项目状态，示例如下：

export const projectCardVerticalDropdown = [
  {
    nameSub: 'Information',
    children: [
      {
        icon: 'i-expand',
        name: 'See Expanded Project',
        code: 1,
        // 所有状态下都显示
        allowedStatuses: ['进行中', '已完成', '已取消']
      },
    ],
  },
  {
    nameSub: 'Schedule',
    children: [
      {
        icon: 'i-plus',
        name: 'add a new task',
        code: 2,
        // 仅进行中状态显示
        allowedStatuses: ['进行中']
      },
      {
        icon: 'i-calendar-week',
        name: 'see schedule',
        code: 3,
        allowedStatuses: ['进行中', '已完成']
      },
    ],
  },
  {
    nameSub: 'Project Templates',
    children: [
      {
        icon: 'i-copy-1',
        name: 'Clone Project',
        code: 4,
        allowedStatuses: ['进行中', '已完成']
      },
      {
        icon: 'i-project_stage_initiation',
        name: 'Make Template From Project',
        code: 5,
        allowedStatuses: ['进行中', '已完成']
      },
      {
        icon: 'i-recieved_files2',
        name: 'Apply Template to this Project',
        code: 6,
        allowedStatuses: ['进行中']
      },
    ],
  },
  {
    nameSub: 'Data',
    children: [
      {
        icon: 'i-file-invoice-1',
        name: 'see Proposal',
        code: 7,
        allowedStatuses: ['进行中', '已完成', '已取消']
      },
      {
        icon: 'i-images',
        name: 'See Project Photos',
        code: 8,
        allowedStatuses: ['进行中', '已完成', '已取消']
      },
      {
        icon: 'i-mail_attachment',
        name: 'See Project Files',
        code: 9,
        allowedStatuses: ['进行中', '已完成', '已取消']
      },
    ],
  },
  {
    nameSub: 'Edit',
    children: [
      {
        icon: 'i-check_mark',
        name: 'mark project complete',
        code: 10,
        allowedStatuses: ['进行中']
      },
      {
        icon: 'i-edit',
        name: 'Edit Project Details',
        code: 11,
        allowedStatuses: ['进行中', '已暂停']
      },
    ],
  },
];

步骤2：TS逻辑中添加过滤方法 #

根据当前项目的状态，动态生成过滤后的下拉列表数据：

// 先定义项目状态枚举（可根据实际业务调整）
export enum ProjectStatus {
  PROCESSING = '进行中',
  COMPLETED = '已完成',
  CANCELED = '已取消',
  PAUSED = '已暂停'
}

verticalDropDownListData = projectCardVerticalDropdown;
// 当前项目的状态，根据实际业务赋值
currentProjectStatus: ProjectStatus = ProjectStatus.PROCESSING;

// 过滤下拉选项的方法
getFilteredDropdown() {
  return this.verticalDropDownListData.map(group => {
    // 过滤当前分组下符合状态要求的子选项
    const filteredChildren = group.children.filter(item => 
      item.allowedStatuses.includes(this.currentProjectStatus)
    );
    // 仅返回有可显示子选项的分组，避免显示空分组
    return { ...group, children: filteredChildren };
  }).filter(group => group.children.length > 0);
}

如果追求更好的性能，也可以监听currentProjectStatus的变化，提前生成过滤后的数组赋值给变量，直接在模板中遍历变量即可，无需每次渲染都调用过滤方法。

步骤3：修改HTML模板，使用过滤后的数据渲染 #

同时修复原模板中button元素重复定义click事件的问题：

<div class="f-column" *ngFor="let item of getFilteredDropdown()">
  <span class="hr">
    <small class="">{{item.nameSub}}</small>
  </span>
  <button 
    data-testid="project-card-expand" 
    class="no-border"
    *ngFor="let items of item.children"
    (click)="selectedProjectInfo(project); selectedDropdownListData(items.code,cloneModal, project)"
  >
    <i class="{{items.icon}}"></i>
    <span>{{items.name}}</span>
  </button>
</div>

内容的提问来源于stack exchange，提问作者Tauseef Arshad