angular - 我在 ngx-datatable 的每个标题单元格中都有一个自定义下拉组件

Question

我在ngx-datatable的每个标题单元格中都有自定义下拉组件。但是当我点击下拉菜单时，它会进入ngx-datatable正文。我该如何解决这个问题，请帮助我。

我正在使用角度 4.0 和打字稿 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>

score 6 · Accepted Answer

对于ngbDropdown下拉列表，我通过添加container="body"如下属性解决了类似的问题：

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

score 1 · Accepted Answer

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

ngx-datatable {
  overflow: visible;
  .datatable-header {
    overflow: visible;
    .datatable-header-cell {
      overflow-x: visible;
    }
  }
}

score 1 · Accepted Answer

我遇到了同样的问题：
我的自定义下拉菜单被<datatable-body>.
我让它工作：

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

但后来使用水平滚动[scrollbarH]，里面的内容水平<datatable-header>溢出，所以我把我的包裹<ngx-datatable>在 a 中<div>并设置overflow:hidden为它。

我希望将来有人会发现这很有用。:)

score 1 · Accepted Answer

我找到了这个解决方案（可能对某人有帮助）：1）使用@ng-select/ng-select 2）添加属性：appendTo="body"，例如：

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

不需要任何其他 z-index 配置。

score 0 · Accepted Answer

ngbTypeahead在 ngx-datatable 列中显示下拉列表（使用）有类似问题。添加container="body"到输入元素对我有用。

<input name="xyz" [ngbTypeahead]="searchElement" container="body"/>

score 0 · Accepted Answer

您可以通过将 a 添加TemplateRef为ViewChild.

让我给你举个例子：

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

   <ngx-datatable-column prop="deadline" name="Deadline" [cellTemplate]="dateTemplate">
   <ngx-datatable-column prop="entryDate" name="Entry date" [cellTemplate]="dateTemplate">

   <ng-template #dateTemplate let-value="value">{{value | date:"shortDate"}}</ng-template>

如您所见，我绑定[cellTemplate]到dateTemplate. 此日期模板在我的组件中定义为带有模板引用的 ViewChild。

export class TableComponent implements OnInit {
  @ViewChild("dateTemplate") dateTemplate: TemplateRef<any>;

...

在您的情况下，您可以执行相同的操作，但使用[cellHeaderTemplate]而不是[cellTemplate]!

score 0 · Accepted Answer

仅ViewEncapsulation.None 在组件中设置和

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

在 .css 或 .scss 中为我完成了这项工作。

angular - 我在 ngx-datatable 的每个标题单元格中都有一个自定义下拉组件

7 回答 7

Related

Reference