Angular Datatables不加载数据

Question

我一直在尝试在我的Angular应用程序上使用Datatables，出于某种原因，当我从json服务获取数组时，表在数据到达之前加载，我得到的结果如下：

如果我尝试订购数据，那么所有数据都会消失。

这是我的users-component.ts：

import { Component, OnInit } from '@angular/core';
import { UserService } from './shared/user.service';
import { User } from "./shared/user";
var $ = require('jquery');
var dt = require('datatables.net')

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



export class UsersComponent implements OnInit {

  public users: User[] = [];

  constructor(public userService: UserService) { }

  ngOnInit() {
    this.userService.getUsers().subscribe(data => this.users = data);

    $('table').DataTable();
  }
}

这是我的HTML：

<table id="table">
  <thead>
    <tr>
      <th data-field="name">Nome</th>
      <th data-field="tg_ie">IE</th>
      <th data-field="cpf_cnpj">CPF</th>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let u of users">
      <td>{{ u.nome }}</td>
      <td>{{ u.rg_ie }}</td>
      <td>{{ u.cpf_cnpj }}</td>

      <td>
        <a [routerLink]="['/users', u.id]">
          Editar
        </a>
      </td>
      <td>
        <a (click)="deleteUser(o)" href="">
          Deletar
        </a>
      </td>
    </tr>
  </tbody>
</table>

<div style="bottom: 45px; right: 24px;">
  <a routerLink="new">
    Novo
  </a>
</div>

我已按照本指南安装数据表：https://l-lin.github.io/angular-datatables/#/getting-started 我的.angular-cli.json和app.module.js都有这些导入。

我怎么能加载它？

谢谢！ @编辑 这是我的代码列出＆＃34;用户＆＃34;在轨道上使用ruby：

def index
  @users = User.all
  render json: @users
end

这就是我在角度

上的称呼方式

private url: string = "http://localhost:3000/users";
getUsers() {
  return this.http.get(this.url).map(res => res.json());
}

Answer 1

您是否尝试在Web服务中切换同步和异步请求？