Question

当我试图以角度js显示数据表时。它显示表中没有可用数据，但表中有4条记录。见下面的截图。

这就是我的所作所为。

user.component.ts

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

import { UserModel }         from './user-model';
import { UserService }       from './user.service';
declare var $ :any;

@Component({
  selector: 'user-page',
  template: require('./user.component.html'),
  providers: [ UserService ]
})

export class UserComponent implements OnInit {

  data: any;
  errorMessage: string;

 constructor(private userService:UserService){ }

 ngOnInit() { 
  this.getUsers();
 }

 getUsers() {  
 this.userService.getUsers()
                 .subscribe(
                   users => {this.data = users; 
                              $(function(){
                               $("#user-table").DataTable();
                              });
                            },
                   error =>  this.errorMessage = <any>error);
  }
}

user.service.ts

import { Injectable }              from '@angular/core';
import { Http, Response }          from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import { UserModel } from './user-model';

@Injectable()
export class UserService {
      private usersUrl = 'http://localhost/larang/public/api/users';  
constructor (private http: Http) {}

getUsers(): Observable<UserModel[]> { 
 return this.http.get(this.usersUrl)
                .map(this.extractData)
                .catch(this.handleError);
}


private extractData(res: Response) { 
  let body = res.json();

  return body.data || { };
}

private handleError (error: Response | any) { console.log(error);

 let errMsg: string;
 if (error instanceof Response) {
  const body = error.json() || '';
  const err = body.error || JSON.stringify(body);
  errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
 } else {
   errMsg = error.message ? error.message : error.toString();
 }
console.error(errMsg);
return Observable.throw(errMsg);
 }
}

user.component.html

<table id="user-table" class="table table-bordered table-hover">
 <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Added On</th>
      </tr>
 </thead>
 <tbody>
       <tr *ngFor="let item of data">
         <td>{{item.name}}</td>
         <td>{{item.email}}</td>
         <td>{{item.added}}</td>
       </tr>
 </tbody>
</table>

this.data 看起来像这样

[
 {"name":"John Doe","email":"john.doe@gmail.com","added":"2017-04-26"},
 {"name":"Ramkishan","email":"Ramkishan@gmail.com","added":"2017-04-26"},
 {"name":"Jason Bourne","email":"jason@gmail.com","added":"2017-04-26"},
 {"name":"RK","email":"ramkishan.suthar@ranosys.com","added":"2017-04-26"}
]

我做错了请帮忙。对像我这样的Angular JS的新手来说非常有帮助。

Answer 1

为解决问题添加了超时时间。

 setTimeout(function () {
  $(function () {
    $('#user-table').DataTable();
  });
}, 3000);

请参阅我在youtube上找到的视频链接 https://www.youtube.com/watch?v=78X8ZRU9Hy8

Answer 2

在 user.component.ts 中，声明数据var为空以初始化它。我不知道为什么但是当我刷新页面时遇到了同样的问题。我认为数据丢失所以你需要初始化它。也许数据表需要知道有一个数组，在你填写之后它才能正常工作。

    ngOnInit(){
        this.data = [];
        this.getUsers();
    }

我错了

你必须重新渲染数据表，因为如果你重新发布初始化会抛出错误，这就是为什么你有消息说＆＃34;没有可用的数据＆＃34;尽管你已经在桌子上了。

更新

在您的组件中，声明此变量：

  @ViewChild(DataTableDirective)
  dtElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

从您拥有的任何服务中提取数据后

this.officeSrv.getAll().subscribe((data) => {
  console.log('----> office service : get all data', data);
  this.offices = data.offices;

  // ADD THIS
  this.dtTrigger.next();

}, (err) => {
  console.log('-----> err', err);
})

如果您有修改直接在同一数据表中进行修改而不更改页面创建并调用此函数

rerender(): void {
 this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
   // Destroy the table first
   dtInstance.destroy();
   // Call the dtTrigger to rerender again
   this.dtTrigger.next();
 });
}

在您的组件中使用此库：

    import { DataTableDirective } from 'angular-datatables';

在你的app模块中：

    import { DataTablesModule } from 'angular-datatables';

并声明：

    imports: [
           ...,
           DataTablesModule

最后是你的模板（HTML）：

   <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-striped table-bordered" cellspacing="0"
      width="100%">
      <thead>
        <tr>
          <th>Nom</th>
          <th>Adresse</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let office of offices">
          <td>{{office.name}}</td>
          <td>{{office.adress}}</td>
          <td>
            <div class="btn-group">
              <button type="button" class="btn btn-block btn-info">Action</button>
              <button type="button" class="btn btn-primary btn-outline-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
              <span class="sr-only">Toggle Dropdown</span>
            </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" (click)="update(office._id)">Mettre à jour</a>
                <a class="dropdown-item" (click)="delete(office._id)">Supprimer</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

希望得到帮助

src：https://l-lin.github.io/angular-datatables/#/advanced/rerender

Answer 3

因此，在我的情况下，在我从服务器获得响应之前，已激活了DataTables。我刚刚为表添加了* ngIf，它对我有用。如下所示。

<table *ngIf="dataService.users" datatable="ng" [dtOptions]="dtOptions">

Answer 4

使用超时功能是一种不好的做法。当您使用角度时，解决此问题的最佳方法是使用change detection。

首先通过将实例添加到这样的构造函数中来创建该实例，

... constructor(private chRef: ChangeDetectorRef) { } ... 在要使用数据表的组件中。

现在使用detectChanges函数，这样角度就可以等到发生某些变化（在您的情况下，直到表格生成正确）

ngOnInit() { 
  ... 
   this.chRef.detectChanges();
   const table: any = $('table');
   this.dataTable = table.DataTable(); 
  ...
 }

因此，一行this.chRef.detectChanges()确实可以解决该问题。

Answer 5

在构造函数上添加以下代码：

private changeDetectorRef: ChangeDetectorRef

在user.component.ts -> getUsers()上，您可以添加完整的功能：

this.userService.getUsers().subscribe(users => {
    this.data = users;
},
error => { this.errorMessage = <any>error },
() => {
    //Complete
    this.changeDetectorRef.detectChanges();
    const table: any = $("#user-table").DataTable();
    this.dataTable = table.DataTable();
});

Answer 6

根据文档here，将以下css添加到您的styles.css

/*
server-side-angular-way.component.css
 */
.no-data-available {
  text-align: center;
}

/*
   src/styles.css (i.e. your global style)
*/
.dataTables_empty {
  display: none;
}

有数据时，它不会显示“无数据”。

Answer 7

发生问题是因为在获取数据之前先渲染了表。

虽然这不是一个适当的解决方案，但是添加超时可以解决此问题。

在您的数据表中添加以下*ngIf="showContent"：

  <table datatable="ng" *ngIf="showContent" [dtOptions]="dtOptions" class="row-border hover table-bordered">

，然后在您的.ts文件组件中，将其添加到ngOnInit()

setTimeout(()=>this.showContent=true, 250);

还声明虚拟变量showContent。

希望有帮助。

Answer 8

我刚刚经历过类似的事情，这就是我解决我的问题的方法。把它放在这里，以防我将来忘记，我可以找到它，并可能帮助其他偶然发现的人。

<table *ngIf="userList.length" datatable class="table table-hover table-striped table-bordered mb-5">

我不喜欢其他解决方案，因为我在我的旧项目中使用了类似的方法，有时在数据刷新时重新创建表和类似的东西时会干扰用户体验，但这解决了它并且工作正常。我认为问题是初始化和服务器将数据返回到数据表之间的时间间隔。

数据表显示使用Angular

8 个答案: