时间戳

首页 > 解决方案 > 单击和更改事件不适用于 Angular 6 数据表响应扩展

datatables - 单击和更改事件不适用于 Angular 6 数据表响应扩展

问题描述

我使用 Angular 6 数据表在前端显示数据。我使用响应式扩展来显示更多数据，如 https://l-lin.github.io/angular-datatables/#/extensions/responsive

 <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
                        <thead>
                            <tr>
                                <th>Category Name</th>
                                <th>Description</th>
                                <th>Is Enable</th>
                                <th>Sub Categories</th>
                                <th>update</th>
                                <th>delete</th> 
                                <th>Extra Data</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let data of vehicleCategoryData; let i = index">
                                <td>{{data.categoryName}}</td>
                                <td>{{data.description}}</td>
                                <td>{{data.isEnable}}</td>
                                <td>{{data.subCategory.length}}</td>                                   
                                <td><i class="fa fa-edit" (click)="update(i)"></i></td>
                                <td><i class="fa fa-trash-o" (click)="delete(i)"></i></td> 
                                <td>{{data.extraData}}

                        </tbody>
                    </table>

我的 dtOptions 也定义如下。

dtOptions: any =  {
pagingType: 'full_numbers',
pageLength: 5,
  columns: [{
    title: 'Category Name',
    data: 'categoryName'
  }, {
    title: 'Description',
    data: 'description'
  }, {
    title: 'Is Enable',
    data: 'isEnable'
  },{
    title: 'Sub Categories',
    data: 'sub'
  },
{
    title: 'update',
    data: 'up'
  },
{
    title: 'delete',
    data: 'del'
  },
{
    title : 'Extra Data',
    data : 'sc',
    className : 'none'
}],
  responsive: true
  };

所以一切正常。但

(click)="update(i)"
(click)="delete(i)"

事件不起作用。我怎么解决这个问题。有什么建议么？

标签： datatablesonclickangular6buttonclickangular-datatables

解决方案

我通过使用listHiddenNodes 函数解决了这个问题。

首先我在组件中导入了响应变量

import Responsive from 'datatables.net-responsive';

然后我把这段代码放在 dtOptions

this.dtOptions = {
    responsive: {
        details: {
            renderer: Responsive.renderer.listHiddenNodes()
        }
    },
};

就这样！

推荐阅读