Angular SlickGrid中用TypeScript实现单元格动态下拉菜单的方法

我来帮你搞定这个动态下拉菜单的需求，结合你已经写好的自定义组件，咱们从几个关键环节调整代码就能实现功能：

1. 修复自定义组件的显示逻辑错误 #

你当前custom-actionFormatter.component.ts里的ngOnInit有语法问题——用了==比较运算符来赋值，应该改成=，同时可以简化判断逻辑：

修改后的ngOnInit代码：

ngOnInit() {
  const completedEl = document.getElementById("completed");
  const scheduledEl = document.getElementById("scheduled");
  
  if (this.dataContext.Status === "Completed") {
    completedEl.style.display = 'block';
    scheduledEl.style.display = 'none';
  } else if (this.dataContext.Status === "Scheduled") {
    completedEl.style.display = 'none';
    scheduledEl.style.display = 'block';
  } else {
    // 其他状态下可以隐藏所有下拉，或者自定义显示内容
    completedEl.style.display = 'none';
    scheduledEl.style.display = 'none';
  }
}

更推荐用Angular的ViewChild来获取DOM元素（比getElementById更符合框架最佳实践）：

1. 先在组件里引入并定义ViewChild：

import { ViewChild, ElementRef } from "@angular/core";

// ...

@ViewChild('completedDropdown') completedDropdown: ElementRef;
@ViewChild('scheduledDropdown') scheduledDropdown: ElementRef;

2. 给模板里的对应元素添加模板引用变量：

<li #completedDropdown class="dropdownCompleted" id="completed">
<!-- ... -->
</li>
<li #scheduledDropdown class="dropdownScheduled" id="scheduled">
<!-- ... -->
</li>

3. 之后在ngOnInit里用this.completedDropdown.nativeElement操作DOM即可。

2. 动态生成下拉选项（替换硬编码内容） #

你当前模板里的选项是固定的AAAAA、BBBBB，我们改成根据状态动态生成选项数组，后续修改选项会更灵活：

在custom-actionFormatter.component.ts里定义选项数组：

completedOptions = ['completed'];
scheduledOptions = ['scheduled', 'suspended', 'abort'];

然后修改模板，用*ngFor循环渲染选项：

<div id="myDrop" style="position:absolute; z-index:12000;">
 <ul class="mainDropdown">
 <li #completedDropdown class="dropdownCompleted" id="completed">
 <ul>
 <li>{{ dataContext.Status }}</li>
 <li role="separator" class="divider"></li>
 <li *ngFor="let option of completedOptions" (click)="onOptionSelect(option)">{{ option }}</li>
 <li role="separator" class="divider"></li>
 </ul>
 </li>
 <li #scheduledDropdown class="dropdownScheduled" id="scheduled">
 <ul>
 <li>{{ dataContext.Status }}</li>
 <li role="separator" class="divider"></li>
 <li *ngFor="let option of scheduledOptions" (click)="onOptionSelect(option)">{{ option }}</li>
 <li role="separator" class="divider"></li>
 </ul>
 </li>
 </ul>
</div>

3. 实现选中选项后更新Status值 #

接下来要处理点击选项后的逻辑：更新行数据的Status，并通知SlickGrid刷新单元格。

在custom-actionFormatter.component.ts里添加点击事件方法：

onOptionSelect(selectedOption: string) {
  // 更新当前行的Status值
  this.dataContext.Status = selectedOption;
  
  // 通知SlickGrid刷新当前行，确保单元格显示最新值
  if (this.parent && this.parent.angularGrid) {
    const grid = this.parent.angularGrid.slickGrid;
    grid.updateRow(this.row);
    grid.invalidateRow(this.row);
    grid.render();
  }
  
  // 关闭下拉菜单
  this.parent.bsDropdown.hide();
}

这里要注意：你在主页面的onCellClick里已经通过args传递了row、dataContext等信息，所以组件里的这些属性会被自动赋值，无需额外处理。

4. 优化下拉菜单的位置（可选） #

你当前模板里的margin: 2px 1000px 0会导致下拉菜单位置偏移，建议用单元格的位置信息来动态调整：

在自定义组件的ngOnInit里添加位置调整逻辑：

ngOnInit() {
  // ... 之前的显示逻辑
  
  // 根据单元格位置调整下拉菜单位置
  if (this.args && this.args.cellNode) {
    const rect = this.args.cellNode.getBoundingClientRect();
    const dropdownEl = document.getElementById(this.dropdownId);
    if (dropdownEl) {
      dropdownEl.style.left = `${rect.left}px`;
      dropdownEl.style.top = `${rect.bottom}px`;
    }
  }
}

这样下拉菜单会精准显示在触发单元格的下方。

完成以上调整后，你就能实现：

• 当状态为Completed时，仅显示completed选项
• 当状态为Scheduled时，显示scheduled、suspended、abort选项
• 选中选项后自动更新单元格的Status标签

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