Angular JQuery DataTable最初显示JSON数据，但过滤器控件不起作用

Question

我试图将DataTable添加到Angular 6的网格中。网格最初显示为JSON数据。但是，当我单击记录数10、25、50、100，列排序，搜索文本或分页控件时，所有网格数据都消失了。

我必须重新加载页面才能再次查看数据。

我在项目中安装了以下内容

npm install bootstrap@4.0.0-beta.2 --save --save-exact
npm install datatables.net --save
npm install datatables.net-bs4 --save
npm install jquery --save
npm install @types/jquery --save-dev

非常感谢您的帮助。

这是我的users.components.ts

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

import { UserService } from '../../services/user.service';
import { Observable } from 'rxjs';
import { User } from '../../models/user';
import 'rxjs/add/Observable/throw'

import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-bs4';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})

export class UsersComponent implements OnInit {

  users$: any[];
  datatable: any;

  constructor(private userService: UserService, private chRef: ChangeDetectorRef ) 
  { 
  }

  ngOnInit() {
    this.getUsers();
  }

  getUsers() {
    this.userService.getUsers()
    .subscribe(( data: any[] )=> {
      this.users$ = data;
      (error) => {
               this.statusMessage = 'Problem with the service. Please try again later.';  
               console.error(error);
            }
      ;

     // this.chRef.detectChanges();
      const table: any = $('table');
      this.datatable = table.DataTable();
    });
  }
}

users.component.scss

@import "~bootstrap/dist/css/bootstrap.css";
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";