ngx-datatable의 각 머리글 셀에 사용자 지정 드롭 다운 구성 요소가 있습니다

Question

ngx-datatable의 각 머리글 셀에 사용자 지정 드롭 다운 구성 요소가 있습니다. 하지만 드롭 다운에서 클릭하면 ngx-datatable 본문에 들어갑니다. 문제를 해결하면 어떻게 도와 드릴까요?

저는 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> 

Answer 1

당신은 ViewChild으로 TemplateRef을 추가하여 템플릿을 공유 할 수 있습니다

가 여기 내 코드입니다.

제가 예를 들어 보겠습니다 :

이의 우리가 이러한 열과 (열 외부 ) 템플릿 있다고 가정 해 봅시다 : 당신이 볼 수있는

<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> 

가 나는 dateTemplate에 [cellTemplate]을 결합한다. 이 날짜 템플릿은 내 구성 요소에서 템플릿 참조가있는 ViewChild로 정의됩니다. 귀하의 경우에는

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

... 

당신은 동일한 작업을 수행하지만 [cellHeaderTemplate] 대신 [cellTemplate]을 사용할 수 있습니다!

Answer 2

당신은 구성 요소의 스타일에 다음과 같은 추가 시도 할 수 있습니다 :

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

Answer 3

저도 같은 문제가 발생했습니다 :
은 내 사용자 지정 드롭 다운은 <datatable-body>으로 숨겨져되었다 .
내가 의해 작동 그것을 가지고 :

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

하지만 수평 스크롤 [scrollbarH]를 사용하여 <datatable-header> 내부의 내용은 내가 내 <ngx-datatable><div> A의 포장과에 overflow:hidden을 설정, 수평 overflew.

누군가가 이것을 유용하게 사용할 수 있기를 바랍니다. :)