Использование данных в угловых 2

Question

Я пытаюсь использовать DataTables в угловом проекте 2. Пожалуйста, посмотрите мой код ниже о том, как я его реализую.

.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. Похоже, что есть и проблема с использованием ngFor в jQuery datatable. Я исправил эту проблему, предоставив this.users в качестве аргумента данных таблицы данных вместе со столбцами и удалив раздел <tbody> из html. Поскольку у меня не было службы для получения пользователей, я создал массив users в компоненте и сгенерировал данные для него. Пожалуйста, сделайте, как я, и ваши данные будут работать нормально. Ссылка: Работающий с возможностью создания стекаблиц