Question

我正在尝试在angular 2项目中使用DataTables。请在下面查看我的代码，了解其实现方式。

.ts

declare var $:any;
users: UserModel[];
public dataTable: DataTable;

ngOnInit() {
    this.getUsers();
  }

  getUsers() {
this.us.getUsers()
  .subscribe((data:any)=>{
    this.users = data;

    var table=$('#datatables').DataTable({
      "pagingType": "full_numbers",
      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
      responsive: true,
      language: {
      search: "_INPUT_",
      searchPlaceholder: "Search records",
      }
   });
  });
  }

.html

<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>FirstName</th>
            <th>MiddleName</th>
            <th>LastName</th>
            <th>UserName</th>
            <th>Email </th>
            <th>IsActivated </th>
            <th>DateAdded</th>
            <!-- <th class="text-right">{{ tableData1.headerRow[4] }}</th>
              <th class="text-right">{{ tableData1.headerRow[5] }}</th> -->
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let user of users">
            <td class="text-center">{{user.Id}}</td>
            <td>{{user.FirstName}}</td>
            <td>{{user.MiddleName}}</td>
            <td>{{user.LastName}}</td>
            <td>{{user.UserName}}</td>
            <td>{{user.Email}}</td>
            <td>{{user.IsActivated}}</td>
        </tr>
    </tbody>
</table>

我可以获取数据并将其呈现在表中，但是当我使用过滤器时，所有数据都会消失。当我从搜索框中删除字符时，我无法取回数据。即使使用排序箭头，也会遇到相同的问题。您能告诉我如何正确执行此操作。谢谢。

Answer 1

我只是在stackblitz上转载了您的问题。似乎在jQuery数据表中使用ngFor存在问题。通过提供this.users作为数据表的数据参数以及列，并从html中删除了<tbody>部分，我解决了这个问题。由于我没有获取用户的服务，因此在组件中创建了一个users数组并为其生成了数据表。请像我一样做，您的数据表将正常工作。链接：Working Datatable Stackblitz

在angular 2中使用数据表

1 个答案: