Angular jquery数据表问题/ ngFor

Question

我有一个与使用ngFor指令的查询数据表相关的问题， 如果我使用静态数据的jquery数据表，它工作正常，但使用数据表与* ngFor指令从http / api服务获取数据，一旦我第一次渲染页面，我看到一个完美的结果，如果我路由到另一个页面并回来我看到没有数据发现消息和所有表数据同时和数据表功能如分页，过滤，搜索不起作用，我应该再次刷新页面来解决这个问题！

请协助解决该问题？!!

＆＃13;

＆＃13;

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
      });
    });
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这段代码 -

constructor(public mytestservice: TestserviceService) { 

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

  }

  ngOnInit() { }

Answer 2

这是解决方案

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

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