如何解决使用 ngx 数据表切换列
我在使用服务器端分页的网格上工作。我想切换列。当用户从下拉列表中选择列时，它将从网格中删除。它的工作，但它改变了网格的行为，如图所示。另外，有没有办法将它移动到通用组件以在其他组件中重用它，因为我有很多网格，我必须在其中实现此功能。这是我的测试代码。
Ts 端代码
toggle(event) {
let col = event.target.value
this.cols = this.cols.filter(c => {
return c.name !== col;
});
}
Html 侧下拉代码
<select (change)="toggle($event)" [(ngModel)]="currentCol" class="col-md-2 mr-2 mt-2 form-control">
<option value="">-Select Column-</option>
<option value="{{col.prop}}" *ngFor="let col of cols">
{{ col.name }}
</option>
</select>
网格 Html 代码
<ngx-datatable-column [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false"
*ngIf="!ischildGroup && !IsPast && IsUpcoimg && (_LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('Instructor') || _LmsUserSession.Roles.includes('ClassCoordinator'))">
<ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
let-selectFn="selectFn">
<input type="checkbox" [checked]="rows.totalCount > 0 && rows.totalCount == this.selectedClasses.length"
(change)="selectAllRows($event)" />
<span> All</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
let-onCheckboxChangeFn="onCheckboxChangeFn" let-row="row">
<input type="checkbox" [checked]="IsRowReselect(row.Id)" id="{{row.Id}}"
(change)="selectSingleRows($event)" (click)="$event.stopPropagation()" />
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [resizeable]="false" [sortable]="false" name="Actions">
<ng-template let-row="row" ngx-datatable-cell-template>
<span
*ngIf="!ischildGroup && (_LmsUserSession.Roles.includes('Instructor') || _LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('Student') || _LmsUserSession.Roles.includes('Client') || _LmsUserSession.Roles.includes('ClassCoordinator'))">
<a type="button" href="javascript:void(0)" title="View Enrollments"
(click)="$event.stopPropagation(navigateToEnrollments(row.Id))"><i class="fa fa-users"></i></a>
|
</span>
<span>
<span
*ngIf="!_LmsUserSession.Roles.includes('Client')
&& ClassCompleteStatus!=row.Status &&
(!_LmsUserSession.Roles.includes('PaperworkInstructor') || _LmsUserSession.Roles.includes('Instructor') || _LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('ClassCoordinator'))">
<a type="button" href="javascript:void(0)" title="Copy Enrollment Url"
(click)="$event.stopPropagation(copyInviteLink(row.CourseId,row.Id))"><i
class="fa fa-globe"></i></a>
|
</span>
<span
*ngIf="(_LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('Instructor') || _LmsUserSession.Roles.includes('ClassCoordinator') || _LmsUserSession.Roles.includes('PaperworkInstructor')) && ((row.Status < PaperWorkSubmittedStatus || row.Status==ClassRejected ))">
<a *ngIf="!isUserExpired" title="Edit" type="button" href="javascript:void(0)"
(click)="$event.stopPropagation(editHandler(row.Id))"><i
[ngClass]="ischildGroup ? 'fa fa-eye' : 'fa fa-pencil'"></i></a>
<a *ngIf="isUserExpired" title="View" type="button" href="javascript:void(0)"
(click)="$event.stopPropagation(editHandler(row.Id))"><i class="fa fa-eye"></i></a>
</span>
<span
*ngIf="(_LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('Instructor') || _LmsUserSession.Roles.includes('PaperworkInstructor') || _LmsUserSession.Roles.includes('ClassCoordinator')) && row.Status >= PaperWorkSubmittedStatus && row.Status!=ClassRejected ">
<a title="View" type="button" href="javascript:void(0)"
(click)="$event.stopPropagation(editHandler(row.Id))"><i class="fa fa-eye"></i></a>
</span>
<span
*ngIf="!ischildGroup && (_LmsUserSession.Roles.includes('Admin') || _LmsUserSession.Roles.includes('ClassCoordinator'))">
|
<a title="Delete" type="button" href="javascript:void(0)"
(click)="$event.stopPropagation(deleteHandler(row.Id,row.IsEnrollmentExist))"><i
class="fa fa-trash-o"></i></a>
</span>
</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [resizeable]="false" name="Date/Time" prop="Date">
<ng-template let-row="row" ngx-datatable-cell-template>
<span *ngIf="row.DateAndTime">{{ row.DateAndTime.Date | date }}
<span *ngIf="row.DateAndTime.flexibleTime" class="badge badge-pill badge-primary">Flexible Class
Timings</span><br>
<span *ngIf="!row.DateAndTime.flexibleTime" class="badge badge-pill badge-primary">
{{ row.StartTime | date:'shortTime' }} - {{row.EndTime | date:'shortTime' }}
</span><br></span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [resizeable]="false" name="Course" prop="Course">
<ng-template let-row="row" ngx-datatable-cell-template>
<div [title]="row.Course">
{{ (row.Course.length > 50) ? (row.Course | slice:0:50) + '...' : row.Course }}
</div>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [resizeable]="false" name="Status" prop="StatusName">
<ng-template let-row="row" ngx-datatable-cell-template>
<div *ngIf="GridType ==PastGridType">
<span *ngIf="row.Status == 0"><span class='badge badge-info'> Awaiting paperwork</span></span>
<span *ngIf="row.Status != 0" [innerHTML]="row.StatusName"></span>
</div>
<span *ngIf="GridType!=PastGridType" [innerHTML]="row.StatusName"></span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [resizeable]="false" name="Client" prop="Client">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.Client }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [resizeable]="false" name="Loc" prop="Location">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.Location }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [resizeable]="false" name="Instructor" prop="Instructor">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.Instructor }}
</ng-template>
</ngx-datatable-column>
<!-- <ngx-datatable-column [resizeable]="false" name="Certificate" prop="Certificate">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.Certificate }}
</ng-template>
</ngx-datatable-column> -->
<ngx-datatable-column [resizeable]="false" name="Enrolled" prop="Enrolled">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.Enrolled }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [resizeable]="false" name="Seat(s) Left" prop="RemainingSeat">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.RemainingSeat < 0 ? 0: row.RemainingSeat }} </ng-template>
</ngx-datatable-column>
</ngx-datatable>
这是切换列之前和之后的图像。
从下拉列表中选择列后。
这就是我在这里面临的问题，它从网格中删除了客户端列，但它更改了网格的视图。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
