Cách sử dụng md-table với các dịch vụ ở Angular 4

Question

Tôi khá mới trong thế giới góc và tôi đang cố gắng sử dụng thành phần md-table mới trong Vật liệu góc 2 với Angular 4.

Tôi đã tạo một dịch vụ từ một API để truy xuất các mảng nội dung đơn giản. Bây giờ tôi đang cố gắng sử dụng dịch vụ này làm nguồn dữ liệu cho bảng md nhưng tôi không thể tìm cách lấy dữ liệu từ dịch vụ (nó luôn trả về cho tôi một mảng trống).

Xin lưu ý rằng trước khi sử dụng bảng md, tôi đã sử dụng dịch vụ này và nó hoạt động bình thường.

Đây là mã cho các thành phần:

import { Component, OnInit, ViewChild } from '@angular/core'; 
import {DataSource} from '@angular/cdk'; 
import {MdPaginator} from '@angular/material'; 
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/operator/map'; 

import { GroupService } from '../shared/group.service'; 
import { Group } from '../shared/group'; 

@Component({ 
    selector: 'app-group-list', 
    templateUrl: './group-list.component.html', 
    styleUrls: ['./group-list.component.css'], 
    providers: [GroupService] 
}) 
export class GroupListComponent implements OnInit{ 

    public DisplayedColumns = ['name', 'email', 'directMembersCount']; 
    public groupDatabase = new GroupDatabase(); 
    public dataSource : CustomDataSource | any; 

    @ViewChild(MdPaginator) paginator : MdPaginator; 

    constructor() {} 

    ngOnInit() { 
    this.dataSource = new CustomDataSource(this.groupDatabase, this.paginator); 
    console.log(this.dataSource); 
    } 

} 

export class GroupDatabase implements OnInit { 

    public dataChange: BehaviorSubject<Group[]> = new BehaviorSubject<Group[]>([]); 
    get data(): Group[] { return this.dataChange.value } 

    private _groupService : GroupService 

    private getAllGroups(){ 
    return this._groupService 
     .getAllGroups(); 
    } 

    constructor(){} 

    ngOnInit() { 
     this.getAllGroups(); 
     console.log(this.getAllGroups()); 
    } 
} 

export class CustomDataSource extends DataSource<any> { 

    constructor(private _groupDatabase = new GroupDatabase(), private _paginator: MdPaginator){ 
    super(); 
    } 

    connect(): Observable<Group[]> { 
    const displayDataChanges = [ 
     this._groupDatabase.dataChange, 
     this._paginator.page 
    ]; 
    return Observable.merge(...displayDataChanges).map(() => { 
     const data = this._groupDatabase.data.slice(); 
     console.log(data); 

     const startIndex = this._paginator.pageIndex * this._paginator.pageSize; 
     return data.splice(startIndex, this._paginator.pageSize); 
    }) 
    } 

    disconnect() {} 
} 

Dưới đây là mã cho HTML:

<md-table #table [dataSource]="dataSource"> 

    <ng-container *cdkColumnDef="name"> 
    <md-header-cell *cdkCellDef>Nom</md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell> 
    </ng-container> 

    <ng-container *cdkColumnDef="email"> 
    <md-header-cell *cdkCellDef>Email</md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row.email}} </md-cell> 
    </ng-container> 

    <ng-container *cdkColumnDef="directMembersCount"> 
    <md-header-cell *cdkCellDef>Nombre de membres</md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row.directMembersCount}} </md-cell> 
    </ng-container> 

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
    <md-row *cdkRowDef="let row; columns: DisplayedColumns;"></md-row> 

</md-table> 

<md-paginator #paginator 
       [length]="groupDatabase.data.length" 
       [pageIndex]="0" 
       [pageSize]="25" 
       [pageSizeOptions]="[5, 10, 25, 100]"> 
</md-paginator> 

Và các dịch vụ liên quan:

private groupApiUrl: string; 
    private groupsApiUrl: string; 
    private headers: Headers; 
    constructor(public http:Http, private config: Config) { 
    this.groupApiUrl = config.serverWithApi + "group"; 
    this.groupsApiUrl = config.serverWithApi + "groups"; 

    this.headers = new Headers(); 
    this.headers.append('Content-Type', 'application/json'); 
    this.headers.append('Accept', 'application/json'); 
    } 

    public getAllGroups =(): Observable<Group[]> => { 
    return this.http.get(this.groupsApiUrl) 
     .map((response: Response) => <Group[]>response.json()) 
     .catch(this.handleError) 
    } 

Tôi không chắc chắn làm thế nào tôi nên gọi dịch vụ bằng cách sử dụng nguồn dữ liệu, đó là lý do tại sao tôi đã làm nó như tôi đã làm trước đây; sử dụng phương thức ngOnInit.

Cảm ơn sự giúp đỡ của bạn.

Answer 1

Dưới đây là một ví dụ về dữ liệu lấy qua HTTP: https://plnkr.co/edit/mjQbufh7cUynD6qhF5Ap?p=preview

---

Bạn đang thiếu một mảnh nơi GroupDatabase không đặt bất kỳ giá trị dữ liệu trên dòng dataChange. Nó là một BehaviorSubject bắt đầu bằng một mảng trống nhưng bạn không đặt thêm bất kỳ dữ liệu nào trên đó. Đây là lý do tại sao bảng chỉ nhận được một mảng trống.

Đầu tiên, biết rằng ngOnInit sẽ không được gọi bởi Angular vì GroupDatabase không phải là chỉ thị và không phải là một phần của chu kỳ phát hiện thay đổi.

Thay vào đó, hãy di chuyển this.getAllGroups() tới hàm tạo của GroupDatabase. và sau đó đăng ký vào kết quả của nó:

export class GroupDatabase { 
    public dataChange: BehaviorSubject<Group[]> = new BehaviorSubject<Group[]>([]); 
    get data(): Group[] { return this.dataChange.value } 

    constructor(groupService: GroupService) { 
    groupService.getAllGroups().subscribe(data => this.dataChange.next(data)); 
    } 
} 

Ngoài ra, thoát khỏi GroupDatabase hoàn toàn và có CustomDataSource của bạn trực tiếp gọi GroupService của bạn.

export class CustomDataSource extends DataSource<Group> { 

    constructor(
     private _groupService: GroupService, 
     private _paginator: MdPaginator) { } 

    connect(): Observable<Group[]> { 
    const displayDataChanges = [ 
     this._groupService.getAllGroups(), 
     this._paginator.page 
    ]; 

    return Observable.merge(...displayDataChanges).map((data, page) => { 
     const clonedData = data.slice(); 

     const startIndex = this._paginator.pageIndex * this._paginator.pageSize; 
     return data.splice(startIndex, this._paginator.pageSize); 
    }) 
    } 

    disconnect() {} 
}