Я новичок в angular, я пытаюсь применить таблицу материалов с разбивкой на страницы и сортировкой. Итак, сначала я пробую разбивать на страницы. Я застрял с этой ошибкой. Кто-нибудь поможет мне с разбиением на страницы.
ошибка:
Property 'subscribe' does not exist on type '() => 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;
});
}
@chandoo это не так сложно, но, возможно, слишком долго, чтобы комментировать: 1: добавьте MatSortModule
в свой модуль. 2: servertable.component.ts: добавьте @ViewChild(MatSort) sort: MatSort;
и назначьте его в onInit: this.dataSource.sort = this.sort;
. 3: ваш html: добавьте matSort
к mat-table
: <mat-table [dataSource] = "dataSource" matSort>
и добавьте mat-sort-header
к каждому mat-header-cell
, например, <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
. Это должно делать свое дело. Если не работает, напишите еще один вопрос
Привет, спасибо за код лечения. Это тоже помогло мне завершить сортировку. Большое спасибо @Tim.
Tq Tim, не могли бы вы помочь мне добавить сортировку для этих полей.