Question

我正在尝试在Angular 4中实现一个Material Design表，它从服务调用接收数据。无论我尝试什么，即使我的服务正确地返回数据，我也无法填充表格。我在控制台中没有收到任何错误。似乎数据源中的connect（）函数永远不会被调用（根据我到处放置的跟踪），因此我的数据源始终为空。我正在运行2.0.0-beta.12版本的资料。我确实读过以前版本的材料中存在错误，这就是为什么我将调用包含在＆＃34; this._changeDetector.detectChanges（）;＆＃34;在我的组件ngOnInit但它没有帮助。我还阅读了问题How to use md-table with services in Angular 4并实施了建议。

在查看官方文档和许多主题之后，这里是我提出的代码：

role.component.ts

import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatPaginator } from '@angular/material';    
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { DataSource } from '@angular/cdk/table';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import { RoleService } from '../shared/services/role/role.service';
import { Role } from '../shared/classes/role';

@Component({
  selector: 'app-roles',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.css']
})
export class RoleComponent implements OnInit {
  public displayedColumns = ['role_name', 'tech_stack'];
  public roleDatabase = new RoleDatabase(this._roleService);
  public roleDatasource: RoleDatasource | null;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private _roleService: RoleService, private _changeDetector: ChangeDetectorRef) { }

  ngOnInit() {
    this.roleDatasource = new RoleDatasource(this.roleDatabase, this.paginator);
    this._changeDetector.detectChanges();
  }

}

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

  constructor(private _roleService: RoleService) {
      this.getAllRoles();
  }

  getAllRoles() {
      this._roleService.getRoles().subscribe( response => {
          this.dataChange.next(response);
      });
  }
}

export class RoleDatasource extends DataSource<any> {

  constructor(private _roleDatabase: RoleDatabase, private _paginator: MatPaginator) {
    super();
  }

  connect(): Observable<Role[]> {

    const displayDataChanges = [
        this._roleDatabase.dataChange,
        this._paginator.page
    ];

    return Observable.merge(...displayDataChanges).map(() => {
        const data = this._roleDatabase.data.slice();
        const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
        return data.splice(startIndex, this._paginator.pageSize);
    })
  }

  disconnect() { }
}

role.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, URLSearchParams, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';

import { Role } from '../../classes/role';

@Injectable()
export class RoleService {

  private rolesHeaderUrl = '/local/roles';

  constructor(private http: Http) { }

  getRoles(): Observable<Role[]> {
    return this.http.get(this.rolesHeaderUrl)
      .map(response => response.json() as Role[])
      .catch(this.getError);
  }

  private getError(error: Response): Observable<any>{
    return Observable.throw(error.json() || 'Server Issue');
  }

}

最后是 role.component.html ：

<mat-card class="title-card">
  <mat-card-title class="page-title">Roles</mat-card-title>
</mat-card>

<mat-card>

  <mat-table #roletable [dataSource]="roleDataSource">

    <ng-container matColumnDef="role_name">
      <mat-header-cell *matHeaderCellDef> Role Name </mat-header-cell>
      <mat-cell *matCellDef="let role"> {{role.role_name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="tech_stack">
      <mat-header-cell *matHeaderCellDef> Technical Stack </mat-header-cell>
      <mat-cell *matCellDef="let role"> {{role.tech_stack}} </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 #paginator
    [length]="roleDatabase.data.length"
    [pageIndex]="0"
    [pageSize]="25"
    [pageSizeOptions]="[5, 10, 25, 100]">
  </mat-paginator>

</mat-card>

我必须在这一点上遗漏一些明显的东西（希望！）......如果有人能找到它的话！

感谢您的帮助！

DDA

Answer 1

我解决了我的问题，这确实是一个明显的错误......我的数据源变量被命名为“roleDatasource”，但我在html“roleDataSource”中拼错了它。哦，好吧......

Angular 4材质表未填充

1 个答案: