angular - 如何在 Angular NGX-Datatables 中使用编辑和删除选项

Question

我正在做一个有角度的项目，我正在使用 ngx-datatables 在表格中显示数据。在这里，我尝试在其中添加编辑（不是内联）和删除功能。

我创建了一个用于编辑的模板，并在列数组的 cellTemplate 中引用它。但是我在这个 cellTemplate 中得到了 EmployeeId，可能是我没有按照它应该工作的方式进行操作。

如何获取编辑图标并将具有相关 EmployeeId 值的 routerLink 属性传递给模板中的每个锚标记。

<ngx-datatable class="material striped"
                     [columns]="columns"
                     [columnMode]="'force'"
                     [rows]="gridModel.Data"
                     [headerHeight]="'auto'"
                     [footerHeight]="'auto'"
                     [rowHeight]="'auto'"
                     [externalPaging]="gridModel?.isServerSide"
                     [externalSorting]="gridModel?.isServerSide"
                     [count]="gridModel?.TotalElements"
                     [offset]="gridModel?.CurrentPageNumber"
                     [limit]="gridModel?.PageSize"
                     [loadingIndicator]="gridModel?.isLoading"
                     (page)='loadPage($event)'
                     (sort)="onSort($event)"
                     [targetMarkerTemplate]="targetMarkerTemplate"
                     [reorderable]="gridModel?.reorderable"
                     [swapColumns]="gridModel?.swapColumns">        

                     <ngx-datatable-column *ngFor="let col of columns"
                        [name]="col.name" [prop]="col.prop">
                     </ngx-datatable-column>
      </ngx-datatable>

<ng-template #idAnchorEditTemplate let-row="row" let-value="value">
            <a [routerLink]="['edit', value]" class="btn btn-sm btn-outline-primary">   
              <i class="fa fa-pencil" aria-hidden="true"></i>     
            </a>
          </ng-template>

      @ViewChild('idAnchorEditTemplate')
      public idAnchorEditTemplate: TemplateRef<any>;

    this.grid.columns = [          
          { name: 'Employee Id', prop: 'EmployeeId' },
          { name: 'Name', prop: 'Name' },
          { name: 'City', prop: 'City' },
          { name: 'Department', prop: 'Department', sortable: false },
          { name: 'Gender', prop: 'Gender', sortable: false },           
          {
            cellTemplate: this.grid.idAnchorEditTemplate,name:'Edit', prop: 'EmployeeId'          ,width: 100
          }
        ];

标签： angulartypescriptangular6ngx-datatable