数据表显示使用 Angular 的表中没有可用数据答案

【问题标题】：Data table is showing no data available in table using Angular数据表显示使用 Angular 的表中没有可用数据
【发布时间】：2017-07-06 04:49:46
【问题描述】：

当我试图在 Angular 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 新手非常有帮助。

【问题讨论】：

发布您的数据的样子
是 2 分钟 @Sajeetharan
我已经更新了问题
它在表格中显示了 4 行对吗？
是的@Sajeetharan，抱歉重播晚了

标签： angular typescript datatable

【解决方案1】：

在您的 user.component.ts 中，将您的数据变量声明为空以对其进行初始化。我不知道为什么，但是当我刷新页面时我遇到了同样的问题。我认为数据丢失了，所以你需要初始化它。也许数据表需要知道有一个数组，并且在你填充它之后它就可以工作了。

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

我错了

您必须重新渲染数据表，因为如果您重新渲染初始化会引发错误，这就是为什么尽管您在表格中有“无可用数据”的消息。

更新

在你的组件中，声明这个变量：

  @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';

在您的应用模块中：

    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>

希望对你有帮助

源代码：https://l-lin.github.io/angular-datatables/#/advanced/rerender

【讨论】：

【解决方案2】：

所以在我的情况下，DataTables 在我得到服务器的响应之前就被激活了。我刚刚为我的表添加了 *ngIf，它对我有用。如下所示。

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

【讨论】：

它在 if 条件下工作得非常好，谢谢兄弟

【解决方案3】：

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

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

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

【讨论】：

它简单而有效的解决方案。这个对我有用！谢谢

【解决方案4】：

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

首先通过像这样在构造函数中添加它来创建这个实例，

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

现在使用 detectChanges 函数，以便 angular 等待某些内容发生更改（在您的情况下，直到表格正确生成）

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

这样一行this.chRef.detectChanges() 就真正解决了这个问题。

【讨论】：

这在页面上无法全局工作。如果应用搜索过滤器并提交搜索按钮，则会出现对齐问题并且会出现单元格格式丢失。在数据表底部显示“表中没有可用数据”。它解决了将以下代码放在搜索服务数据上的问题。请让我知道是否有其他方法可以在不破坏数据表的情况下解决动态数据绑定。我正在使用 bootstrap & jquery datatable.Angular 版本是 7. $('#example').DataTable().destroy(); this.changeDetectorRef.detectChanges(); $('#example').DataTable();

【解决方案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();
});

【讨论】：

如果应用搜索过滤器并提交搜索按钮，则出现对齐问题并且单元格格式丢失。在数据表底部显示“表格中没有可用数据”。它解决了将以下代码放在搜索服务数据上的问题。请让我知道是否有其他方法可以在不破坏数据表的情况下解决动态数据绑定。我正在使用 bootstrap & jquery datatable.Angular 版本是 7. $('#example').DataTable().destroy(); this.changeDetectorRef.detectChanges(); $('#example').DataTable();

【解决方案6】：

出现问题是因为表格在您获取数据之前被渲染。

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

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

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

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

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

同时声明虚拟变量showContent。

希望它有所帮助。

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

根据文档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;
}

当您有数据时，这不会显示“无数据”。

【讨论】：