Primeng 数据 table 加载失败

Question

我有数据 table 和数据列表。我要显示加载图标表示数据正在加载。我可以显示数据，但没有显示加载图标。

我的html

 <p-dataTable [value]="stuList" [rows]="10" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords" [rowsPerPageOptions]="[50,100,150]" [pageLinks]="3" sortMode="multiple" [(selection)]="selectedData"  selectionMode="single" expandableRows="true">
//coulmns
</p-dataTable>

我的服务class

 import {Injectable} from '@angular/core';
import {Http, Response,Headers} from '@angular/http';
import {Student} from './student';
import 'rxjs/Rx';

@Injectable()
export class StudentService {
private headers = new Headers({'Content-Type': 'application/json'});
student:Student;
url:any='http:localhost:3002/getStudents';
constructor(private http: Http) {}
//Rest Call
getData(): Observable<Student[]>{
return this.http.get(this.url)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data.request as Student[];
}
}

我的 table 组件

 import { Component,OnInit, Input} from '@angular/core';
import { StudentService } from './studentservice.component'
import { Student} from './student'
import { Router }    from '@angular/router';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import {Injectable} from '@angular/core';

@Component({
selector: 'data-grid',
templateUrl: '../app/datagrid.html',
styleUrls: ['../app/datagrid.css']
})
@Injectable()
export class StudentDataGrid implements OnInit {
datasource:Student[];
stuList:Student[];
selectedData:Student; 
@Input()
loading: boolean;
totalRecords:number;
constructor(private studentService:StudentService, private router:Router) {      }
ngOnInit() {
this.loading = true;
//Rest call
this.studentService.getData().subscribe(stuList => {
this.datasource = stuList;
this.totalRecords = this.datasource.length;
this.stuList = this.datasource;
this.loading = false;
}); 
}

我的应用程序模块 class

 import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';
import { AppComponent }         from './app.component';
import {DataTableModule,SharedModule} from 'primeng/primeng';
import {DialogModule} from 'primeng/primeng';

@NgModule({
imports: [BrowserModule,FormsModule,HttpModule,InMemoryWebApiModule.forRoot(InMemoryDataService,{passThruUnknownUrl:   true}),
AppRoutingModule,DataTableModule,SharedModule,DialogModule ],
declarations: [],providers: [],bootstrap: [ AppComponent ]})
export class AppModule { }

当我尝试上面的代码时，显示以下错误。

无法绑定到 'loading'，因为它不是 'p-dataTable' 的已知属性。 1. 如果 'p-dataTable' 是一个 Angular 组件并且它有 'loading' 输入，那么验证它是这个模块的一部分。 2. 如果 'p-dataTable' 是 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到此组件的“@NgModule.schemas”以抑制此消息。

我错过了什么吗？请帮忙

Answer 1

我还没有使用 angular 2。但我认为你必须把
this.loading = 假
在回调函数中。

Answer 2

您需要在 loading 属性之前使用 @Input 声明符。它需要从 @angular/core.

导入

Answer 3

首先，你不需要定时器功能，在调用 make loading true 之前，您可以在 angular 服务回调中将其设为 false。

里面setTimeout回调函数"this"是不同的对象，请参阅此 link 了解 js 中的执行上下文。 What is the 'Execution Context' in JavaScript exactly?

 import {DataTableModule,SharedModule,DialogModule} from 'primeng/primeng';
    ngOnInit() {
        this.loading = true;
        this.carService.getCarsSmall().then(cars =>{
                    this.cars = cars;
                    this.loading = false;
        });

}

显示加载掩码，有不同的方法，您可以在Angular 2中搜索spinner然后您可以挂钩所有http调用，您不需要再次为每个http调用手动编写。

Answer 4

我已经通过将 Angular2 升级到 angular4 并将 Primeng2 升级到 primeng4 解决了这个问题

需要使用PrimeNG-4.we可以在每次发布后查看变更日志；

https://www.primefaces.org/primeng-4-0-0-rc3-released/

https://github.com/primefaces/primeng/issues/2395

Primeng 数据 table 加载失败

Primeng data table loading not working

angular

primeng

我的html

我的服务class

我的 table 组件

我的应用程序模块 class