我的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>

我的服务类

 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[];
}
}

我的表组件

 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;
}); 
}

我的应用模块类

 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

我通过将Angular2升级为angular4，将Primeng2升级为primeng4

解决了这个问题

需要使用PrimeNG-4.我们可以在每次发布后检查更改日志;

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

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

Answer 2

我还没有使用角度2。但我认为你必须放置
this.loading = false
在回调函数中。

Answer 3

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

Answer 4

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

在 setTimeout 内部回调函数＆＃34;此＆＃34; 是不同的对象，请参阅此链接以了解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中搜索微调器然后你可以挂钩所有的http呼叫，你不需要再次为每个http呼叫手动写。

Primeng数据表加载不起作用

我的HTML

我的服务类

我的表组件

我的应用模块类

4 个答案: