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";