Выдача угловой таблицы данных jquery / ngFor

Question

У меня есть одна проблема, связанная с таблицами данных запросов с помощью директивы ngFor, если я использую таблицы данных jquery со статическими данными, это работает нормально, но при использовании таблицы данных с директивой * ngFor для получения данных из службы http / api, когда я в первый раз отображаю страницу, я вижу идеальный результат, если я маршрутизирую на другую страницу и возвращаюсь. Я не вижу ни данных, ни данных, ни данных всех таблиц одновременно, а функции таблиц данных, такие как Пейджинг, Фильтр, поиск не работают, я должен обновить страницу еще раз, чтобы это исправить !!

, пожалуйста, помогите, как решить эту проблему? !!

import { Component, OnInit } from '@angular/core';
import { TestserviceService } from '../services/testservice.service';
declare var $: any;
declare var jQuery: any;


@Component({
  selector: 'Test',
  templateUrl: './test.html'
})
export class Test implements OnInit {
  posts: any[];
  constructor(public mytestservice: TestserviceService) { 

    this.mytestservice.getposts().subscribe(response =>{
      this.posts = response.json();
    });

  }

  ngOnInit() {

    $(function(){
      $('#posts').DataTable({
        responsive: true
      });
    });
  }
}

<div class="card-body">
        <table class="table table-hover" id="posts" width="100%">
            <thead>
                <tr>
                    <th>SEQ </th>
                    <th>User ID</th>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Body</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let post of posts">
                    <td>###</td>
                    <td>{{post.userId}}</td>
                    <td>{{post.id}}</td>
                    <td>{{post.title}}</td>
                    <td>{{post.body}}</td>
                </tr>
            </tbody>
        </table>
    </div>

Answer 1

это решение

  ngOnInit() {
    this.mytestservice.getposts().subscribe(response =>{
      this.posts = response.json();
      $(function(){

        $('#posts').DataTable({
          responsive: true
        });
      });
    });
  }

Answer 2

Попробуйте этот кусок кода -

constructor(public mytestservice: TestserviceService) { 

    this.mytestservice.getposts().subscribe(response =>{
      this.posts = response.json();
      $('#posts').DataTable({
        responsive: true
      });
    });

  }

  ngOnInit() { }