我是棱角分明的新手,我正在尝试使用分页和排序来应用材质表。所以,最初我尝试分页。我坚持这个错误。有没有人帮我分页。
错误是:
属性'subscribe'在类型'()=> Observable'上不存在。
servertable.component.ts
import { Component, OnInit, AfterContentInit, ViewChild } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { UserService } from './user.service';
import { IUser } from './model/IUser';
@Component({
selector: 'app-servertable',
templateUrl: './servertable.component.html',
styleUrls: ['./servertable.component.scss']
})
export class ServertableComponent implements OnInit, AfterContentInit, AfterViewInit {
dataSource: any;
users: IUser[];
displayedColumns = ['name', 'email', 'phone', 'company'];
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private service: UserService) { }
ngOnInit() {
this.service.getUser.subscribe(results => this.users = results);
console.dir(this.dataSource);
}
ngAfterContentInit() {
this.dataSource = new MatTableDataSource(this.users);
this.dataSource.paginator = this.paginator;
}
}
user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs/observable';
import { IUser } from './model/IUser';
@Injectable()
export class UserService {
private serviceUrl = 'https://jsonplaceholder.typicode.com/users';
constructor(private http: HttpClient) { }
getUser(): Observable<IUser[]> {
return this.http.get<IUser[]>(this.serviceUrl);
}
}
servertable.component.html
<div>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef> E-Mail </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
</ng-container>
<ng-container matColumnDef="phone">
<mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
</ng-container>
<ng-container matColumnDef="company">
<mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.company.name}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
你没有打电话给你的服务方法:this.service.getUser.subscribe(results => this.users = results);
。你忘了在getUser
上添加括号。
将其更改为:this.service.getUser().subscribe(results => this.users = results);
还有一个问题:this.users
将无法在ngAfterContentInit
中使用,因为getUser()
调用是异步的。将表的分配移动到subscribe()
调用。整个ngOnInit()
将如下所示:
ngOnInit() {
this.service.getUser().subscribe(results => {
this.users = results;
this.dataSource = new MatTableDataSource(this.users);
this.dataSource.paginator = this.paginator;
});
}