Angular 我在ngx datatable的每个头单元格中都有一个自定义下拉组件

我在ngx数据表的每个头单元格中都有自定义下拉组件。但当我点击下拉菜单时，它进入了ngx数据表主体。我如何解决这个问题请帮助我

我使用的是angular 4.0和typescript 2.4

屏幕截图：

这是我的密码：

 <div>
      <ngx-datatable style="height:450px;"
        class='material'
        [rows]='activeTabData | filtermanual:propKey:propValue | orderBy : {property: column, direction: direction}'
        [columnMode]="'force'"
        [headerHeight]="height"
        [rowHeight]="getRowHeight"
        [scrollbarV]="true"
        [scrollbarH]="true"
        [loadingIndicator]="loadingIndicator"
        [rowClass]="getRowClass"
        (page)="onPage($event)">
      <div>
        <ngx-datatable-column 
          [width]="50"
          [frozenLeft]="true">
            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
              <input type="checkbox" 
              (ngModelChange)="checkButtonState($event, row)"
              [ngModel]="row.status"
              >
          </ng-template>
        </ngx-datatable-column>

        <ul>
          <li *ngFor="let col of tableKeys; let i=index; let last = last" >
        <ngx-datatable-column name={{col}} width="230" [resizeable]="true">
          <ng-template let-column="column" ngx-datatable-header-template >
              <div class="draggable" style="height:30px;width:160px;background:transparent;z-index:1000;position:relative;cursor:pointer;"></div>

                                    <ng2-multiselect 
                                      [options]="dropdowns[col]"
                                      [loading]="isLoading"
                                      [(ngModel)]="multiModels[col]"
                                      [texts]="{'defaultTitle':col}"
                                      (dropdownOpen)="dropdownOpen()"
                                      (dropdownClosed)="dropdownClosed(col)"
                                      >
                                    </ng2-multiselect>   
        </ng-template>

          <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
              <i [innerHTML]="row[col]"></i>
          </ng-template>
        </ngx-datatable-column>

          </li>
        </ul>
      </div>
      </ngx-datatable>
    </div>

您可以通过将

TemplateRef

添加为

ViewChild

来共享模板

让我举个例子：

假设我们有这些列和一个模板（，在这些列之外）：

---

在您的情况下，您也可以这样做，但是使用

[cellHeaderTemplate]

而不是

[cellTemplate]

您可以尝试将以下内容添加到组件样式中：

ngx数据表{ 溢出：可见； .数据表标题{ 溢出：可见； .datatable头单元格{ 溢出x：可见； } } }

---

我也有同样的问题：
我的自定义下拉列表被

隐藏
我通过：

.datatable-header-cell,
.datatable-header {
    overflow:visible !important;   
}
.datatable-row-center{
   z-index:11;
}

但是使用水平滚动

[scrollbarH]

，

中的内容会水平溢出，因此我将

包装在

中，并将

溢出：隐藏设置为它

我希望将来有人会觉得这很有用。：）
 我找到了这个解决方案（可能对某人有帮助）：
1） 使用@ng select/ng select
2） 添加属性：appendTo=“body”，示例：

    <ng-select [items]="simpleItems"
               appendTo="body"
               [(ngModel)]="selectedSimpleItem">
    </ng-select>



不需要任何其他z索引配置。
仅使用
视图封装进行设置。在组件和

datatable-body-cell {
  overflow: visible !important;
}

在.css或.scss中为我做了这项工作。
对于
ngbDropdown
下拉列表，我通过添加
container=“body”
属性解决了类似的问题，如下所示：

<div ngbDropdown class="d-inline-block" container="body">
....
.....
</div>


....
.....
在ngx数据表列中显示下拉列表（使用
ngbTypeahead
）时也存在类似问题。将container=“body”添加到输入元素对我来说很有用

您能创建一个plunker来复制吗？您所说的“它进入ngx数据表体”是什么意思？到底是什么行为？嗨，Vega，我添加了新的屏幕排序。opend下拉列表被表体隐藏。请帮助我。我如何解决这个问题。@Mohit有任何更新吗？我也遇到了同样的问题。我找到了解决方案。你需要在单击下拉菜单时调用下面的函数。如果有任何问题，请告诉我。dropdownSettingOnTop（）{let rows=document.getElementsByClassName（'datatable-row-wrapper'）；for（let i=0；i[headerTemplate]
而不是
[cellHeaderTemplate]
，但是你的解决方案与问题中的结果相同。效果非常好！
datatable-body-cell {
  overflow: visible !important;
}

<div ngbDropdown class="d-inline-block" container="body">
....
.....
</div>