我有数据表和数据列表。我想显示加载图标,表示数据正在加载。我可以显示数据,但不能显示加载图标。
我的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 { }
当我试着上面的代码,显示下面的错误。
无法绑定到“加载”,因为它不是“”的已知属性。1.如果“p-dataTable”是一个角度分量,并且它有“加载”输入,则验证它是该模块的一部分。2.如果‘p’是一个Web组件,那么将"CUSTOM_ELEMENTS_SCHEMA“添加到该组件的'@NgModule.schemas‘中,以抑制此消息。
我是不是遗漏了什么?请帮帮忙
发布于 2017-04-18 05:18:02
我已经通过将我的Angular2升级为angular4,将Primeng2升级为primeng4来解决这个问题。
需要使用PrimeNG-4.我们可以在每次发布后检查更改日志;
发布于 2017-04-17 00:27:58
我还没有用角质2。但我认为你必须
this.loading = false
在回调函数中。
发布于 2017-04-17 00:33:43
您需要在@Input
属性之前使用loading
声明器。它需要从@angular/core
中导入。
https://stackoverflow.com/questions/43447802
复制相似问题