在角度 2 中使用数据表

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