Javascript 是否有任何方法可以使用网格中的typescript在表格单元格中显示具有不同选项的下拉菜单

在下面的给定图像中，我想在状态为completed时显示options={completed}，在状态为scheduled时显示options={scheduled，suspended，abort}，同样，它还应该将标签status更改为selectedoption

我已经创建了一个自定义组件：

custom-actionFormatter.component.html

这是我要显示下拉菜单的主页面：

running-schedule.component.ts

---

最近在此（最后一列）中添加了带有操作的下拉列表。代码的组件文件为。在SlickGrid中添加bootstrap下拉列表并不完全是直接的，因为SlickGrid是如何在DOM中构建网格的，更改

z-index

也是不够的，长话短说，只需查看示例22。感谢您的回复，但问题是我在这个编码领域是新手，正如您所说，我已经看到了（示例22）很多时候，我不知道如何处理这个问题，所以如果有任何其他选择让我知道，这将是非常有帮助的。

<!------------------custom-actionFormatter.component.html----------------------->

    <div id="myDrop" style="position:absolute; z-index:12000;    margin: 2px 1000px 0;">
        <ul class="mainDropdown">
            <li class="dropdownCompleted" id="completed">
                <ul>
                    <li>{{ dataContext.Status }}</li>
                    <li role="separator" class="divider"></li>
                    <li>AAAAA</li>
                    <li>BBBBB</li>
                    <li role="separator" class="divider"></li>
                </ul>
            </li>
            <li class="dropdownScheduled" id="scheduled">
                <ul>
                    <li>{{ dataContext.Status }}</li>
                    <li role="separator" class="divider"></li>
                    <li>CCCCC</li>
                    <li>DDDDD</li>
                    <li role="separator" class="divider"></li>
                </ul>
            </li>
        </ul>
    </div>

/***************************custom-actionFormatter.component.ts**************/

    import { Component, OnInit, ViewEncapsulation } from "@angular/core";
    import * as $ from "jquery";

    @Component({
      templateUrl: "./custom-actionFormatter.component.html",
      stylstrong texteUrls: ["./custom-actionFormatter.component.css"],
      encapsulation: ViewEncapsulation.None
    })
    export class CustomActionFormatterComponent implements OnInit {
      parent: any; // parent component context
      row: number;
      dataContext: any;
      dropdownId = "myDrop";
      dropDownToggleId = "toggleDrop";

      constructor() {

      }

      ngOnInit() {

       if (this.dataContext.Status === "Completed") {
       document.getElementById("completed").style.display == 'block';
       document.getElementById("scheduled").style.display == 'none';
    }
    if (this.dataContext.Status === "Scheduled") {
       document.getElementById("completed").style.display == 'none';
       document.getElementById("scheduled").style.display == 'block';
    }
    }
    }

/***************************running-schedule.component.ts**************/

    import {
      Component,
      OnInit,
      Injectable,
      ViewEncapsulation,
      HostListener
    } from "@angular/core";
    import { Headers, RequestOptions } from "@angular/http";
    import { Http, Response } from "@angular/http";

    import {
      Column,
      GridOption,
      AngularGridInstance,
      Filters,
      BsDropDownService,
      ExtensionName,
      FieldType,
      Formatter,
      Formatters,
      Editors,
      Statistic,
      GridStateChange,
      GridOdataService,
      OperatorType,
      OnEventArgs,
      EditorValidator,

      SelectOption,
      AngularUtilService
    } from "../../modules/angular-slickgrid";
    import { RemoteServerCommunicationService } from "./../../Services/ListView/RemoteServerCommunication.service";
    import { GlobalDataService } from "./../../Services/global-data.service";
    import { PathStorageService } from "./../../Services/ListView/path-storage.service";
    import settingPayLoadProcessing from "./../../../assets/data/applicationSetting.json"
    import{CustomActionFormatterComponent}from '../custom-actionFormatter/custom-actionFormatter.component';
    import * as $ from "jquery";
    Component({
      selector: "app-running-schedule",
      templateUrl: "./running-schedule.component.html",
      styleUrls: ["./running-schedule.component.css"],
      encapsulation: ViewEncapsulation.None
    })
    @Injectable()
    export class RunningScheduleComponentMenu implements OnInit {
    columnDefinitions: Column[] = [];
      gridOptions: GridOption = {};
      dataset = [];
    constructor(
        private http: Http,
        private remoteservercommunicationservice: RemoteServerCommunicationService,
        public pathstorageservice: PathStorageService,
        private globaldataservice: GlobalDataService,
        private bsDropdown: BsDropDownService,
        private angularUtilService: AngularUtilService
      ) { }

     ngOnInit() {
       this.defineGrid();
    }

     angularGridReady(angularGrid: AngularGridInstance) {
        this.angularGrid = angularGrid;
     }

     defineGrid() {
        this.columnDefinitions = [

          {
            id: "Status",
            name: "Status",
            field: "Status",
            minWidth: 100,
            filterable: true,
            type: FieldType.string,
            formatter: Formatters.bsDropdown,
            params: { label: 'Status' },
            filter: {
              collection: [
                { value: "", labelKey: "All" },
                { value: "Completed", labelKey: "Completed" },
                { value: "Abort", labelKey: "Abort" },
                { value: "Scheduled", labelKey: "Scheduled" },
                { value: "Suspended", labelKey: "Suspended" },
                { value: "Inprogress", labelKey: "Inprogress" }
              ],
              model: Filters.singleSelect
            },
            onCellClick: (e: Event, args: OnEventArgs) => {;
              this.bsDropdown.render({
                component:CustomActionFormatterComponent ,
                args,
               offsetLeft: 92,
                offsetDropupBottom: 15,
                parent: this, // provide this object to the child component so we can call a method from here if we wish
              });
            }
        }
        ];
        this.gridOptions = {
          asyncEditorLoading: false,
          autoCommitEdit: false,
          enableAutoResize: true,
          autoEdit: true,
        editable: true,
          autoResize: {
            containerId: "demo-container",
            sidePadding: 15,
            maxHeight: this.scrHeight - 125
            // minHeight: 300,
          },
          // true by default
          enableCellNavigation: true,
          enableColumnPicker: true,
          enableExcelCopyBuffer: true,
          enableCheckboxSelector: true,
          enableFiltering: true,
          enableAsyncPostRender: true,
          asyncPostRenderDelay: 0,
          alwaysShowVerticalScroll: false,
          params: {
            angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)
          },
          checkboxSelector: {
            // you can toggle these 2 properties to show the "select all" checkbox in different location
            hideInFilterHeaderRow: false,
            hideInColumnTitleRow: true
          },
          rowSelectionOptions: {
            // True (Single Selection), False (Multiple Selections)
            selectActiveRow: false
          },
          pagination: {
            pageSizes: [this.page],
            pageSize: null, //defaultPageSize,
            totalItems: 0
          },
          presets: {
            pagination: { pageNumber: 1, pageSize: this.page }
          },
          backendServiceApi: {
            service: new GridOdataService(),
            process: query => this.getCustomerApiCall(query),
            postProcess: response => {
              this.getCustomerCallback(response);
            }
          }
        };
      }
    }
    }