数据表显示使用Angular表中没有可用数据 [英] Data table is showing no data available in table using Angular
问题描述
当我尝试在angular js中显示数据表时.它显示表中没有可用数据，但表中有4条记录.请参见下面的屏幕截图.
When I was trying to show data table in angular js. It shows no data available in table but there are 4 records in table. See screenshot below.
这就是我所做的.
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新手来说，这将非常有用.
What I am doing wrong please help. It will be very helpful for newbies in Angular JS like me.
推荐答案
在您的 user.component.ts 中，将数据var声明为空以将其初始化.我不知道为什么，但是刷新页面时遇到了同样的问题.我认为数据已丢失，因此您需要对其进行初始化.也许数据表需要知道有一个数组，并且在填充后它就可以工作了.
In your user.component.ts, declare your data var empty to initialize it. I don't know why but I had the same problem when I refresh the page. I think the data is lost so you need to initialize it. Maybe datatable needs to know there is an Array and after you fill it it's working.
ngOnInit(){
this.data = [];
this.getUsers();
}
我错了
您必须重新呈现数据表，因为如果重新呈现初始化会引发错误，这就是为什么尽管表中有信息也提示没有可用数据"的原因.
You have to rerender the datatable because if you rerender the initialisation throw an error, that's why you have the message saying "no data available" despite you have in the table.
更新
在您的组件中，声明以下变量:
In your component, declare this variable:
@ViewChild(DataTableDirective)
dtElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
从您拥有的任何服务中提取数据后:
after you pull your data from whatever service you have:
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);
})
如果您有修改以直接在同一数据表中进行修改而无需更改页面创建和调用此函数
If you have modification to make modification directly in the same datatable without changing the page create and call this function
rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
// Destroy the table first
dtInstance.destroy();
// Call the dtTrigger to rerender again
this.dtTrigger.next();
});
}
在您的组件中使用此库:
Use this library in your component:
import { DataTableDirective } from 'angular-datatables';
在您的应用模块中:
import { DataTablesModule } from 'angular-datatables';
并声明:
imports: [
...,
DataTablesModule
最后是您的模板(HTML):
And finally for your templating (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
这篇关于数据表显示使用Angular表中没有可用数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
