Angular 6材质表数据源

尝试为“角度材质”表设置数据源时会遇到很大困难

这就是我想做的：

export class ServersTableDataSource extends DataSource<Server> {
  data: Server[] = EXAMPLE_DATA;

  constructor(private paginator: MatPaginator, private sort: MatSort, private serversService: ServersService) {
    super();
    this.data = this.serversService.getServers();
  }
  connect(): Observable<Server[]> {
    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    // Set the paginators length
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...this.data]));
    }));
  }


export class ServersTableComponent implements OnInit {

  constructor(private serversService: ServersService) { }

  ngOnInit() {
    this.dataSource = new ServersTableDataSource(this.paginator, this.sort, this.serversService);
    this.serversService.serversChanges.subscribe(() => {
      this.dataSource.data = this.serversService.getServers();
    });
    //done this way because for unknown reason if i return an observable,
    //it doesn't pass a value. Anyway, this isn't relevant. The point is that this.dataSource.data  is set.
  }

---

解决方案是使用

BehaviorSubject

实现不同的更新机制，并通过

index

跟踪行（由于某些原因，无法通过唯一的obj子属性进行跟踪。）

数据源：

export class ServersTableDataSource extends DataSource<Server> {
  data: Server[] = [];

  constructor(private paginator: MatPaginator, private sort: MatSort, private serversService: ServersService) {
    super();
  }


  connect(): Observable<Server[]> {
    return new Observable<Server[]>(observer => {
      this.serversService.getServersSubj().subscribe((servers) => {
        if (servers) {
          return this.applyMutations(servers).subscribe(data => {
            observer.next(data);
          });
        }
      });
    });
  }

  disconnect() {

  }

  applyMutations(tmpData: Server[]): Observable<Server[]> {
    const dataMutations = [
      observableOf(tmpData),
      this.paginator.page,
      this.sort.sortChange
    ];

    // Set the paginators length
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...tmpData]));
    }));
  }

  <mat-table #table [dataSource]="dataSource"
         [trackBy]="trackByIndex"
         multiTemplateDataRows
         matSort
         aria-label="Elements">

  ***in component:***

  trackByIndex(index, item) {
    return index;
  }

导出类ServersTableDataSource扩展数据源{
数据：服务器[]=[]；
构造函数（专用分页器：MatPaginator，专用排序：MatSort，专用服务器服务：服务器服务）{
超级（）；
}
connect（）：可观察{
返回新的可观察对象（观察者=>{
this.serversService.getServersSubj（）.subscribe（（服务器）=>{
if（服务器）{
返回此.applyMutations（服务器）.subscribe（数据=>{
下一步（数据）；
});
}
});
});
}
断开连接（）{
}
应用程序置换（tmpData:Server[]）：可观察{
常数数据突变=[
观测值（tmpData），
这个.paginator.page，
this.sort.sortChange
];
//设置分页器的长度
this.paginator.length=this.data.length；
返回合并（…数据突变）.pipe（映射（（）=>{
返回this.getPagedData（this.getSortedData（[…tmpData]）；
}));
}

跟踪更改：

export class ServersTableDataSource extends DataSource<Server> {
  data: Server[] = [];

  constructor(private paginator: MatPaginator, private sort: MatSort, private serversService: ServersService) {
    super();
  }


  connect(): Observable<Server[]> {
    return new Observable<Server[]>(observer => {
      this.serversService.getServersSubj().subscribe((servers) => {
        if (servers) {
          return this.applyMutations(servers).subscribe(data => {
            observer.next(data);
          });
        }
      });
    });
  }

  disconnect() {

  }

  applyMutations(tmpData: Server[]): Observable<Server[]> {
    const dataMutations = [
      observableOf(tmpData),
      this.paginator.page,
      this.sort.sortChange
    ];

    // Set the paginators length
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...tmpData]));
    }));
  }

  <mat-table #table [dataSource]="dataSource"
         [trackBy]="trackByIndex"
         multiTemplateDataRows
         matSort
         aria-label="Elements">

  ***in component:***

  trackByIndex(index, item) {
    return index;
  }

***在组件中：***
trackByIndex（索引，项）{
收益指数；
}

---

this.serversService.getServersSubj（）

返回

BehaviorSubject

解决方案是使用

BehaviorSubject

实现不同的更新机制，并通过

索引跟踪行（由于某些原因，无法通过唯一的obj子属性进行跟踪。）

数据源：

export class ServersTableDataSource extends DataSource<Server> {
  data: Server[] = [];

  constructor(private paginator: MatPaginator, private sort: MatSort, private serversService: ServersService) {
    super();
  }


  connect(): Observable<Server[]> {
    return new Observable<Server[]>(observer => {
      this.serversService.getServersSubj().subscribe((servers) => {
        if (servers) {
          return this.applyMutations(servers).subscribe(data => {
            observer.next(data);
          });
        }
      });
    });
  }

  disconnect() {

  }

  applyMutations(tmpData: Server[]): Observable<Server[]> {
    const dataMutations = [
      observableOf(tmpData),
      this.paginator.page,
      this.sort.sortChange
    ];

    // Set the paginators length
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...tmpData]));
    }));
  }

  <mat-table #table [dataSource]="dataSource"
         [trackBy]="trackByIndex"
         multiTemplateDataRows
         matSort
         aria-label="Elements">

  ***in component:***

  trackByIndex(index, item) {
    return index;
  }

导出类ServersTableDataSource扩展数据源{
数据：服务器[]=[]；
构造函数（专用分页器：MatPaginator，专用排序：MatSort，专用服务器服务：服务器服务）{
超级（）；
}
connect（）：可观察{
返回新的可观察对象（观察者=>{
this.serversService.getServersSubj（）.subscribe（（服务器）=>{
if（服务器）{
返回此.applyMutations（服务器）.subscribe（数据=>{
下一步（数据）；
});
}
});
});
}
断开连接（）{
}
应用程序置换（tmpData:Server[]）：可观察{
常数数据突变=[
观测值（tmpData），
这个.paginator.page，
this.sort.sortChange
];
//设置分页器的长度
this.paginator.length=this.data.length；
返回合并（…数据突变）.pipe（映射（（）=>{
返回this.getPagedData（this.getSortedData（[…tmpData]）；
}));
}

跟踪更改：

export class ServersTableDataSource extends DataSource<Server> {
  data: Server[] = [];

  constructor(private paginator: MatPaginator, private sort: MatSort, private serversService: ServersService) {
    super();
  }


  connect(): Observable<Server[]> {
    return new Observable<Server[]>(observer => {
      this.serversService.getServersSubj().subscribe((servers) => {
        if (servers) {
          return this.applyMutations(servers).subscribe(data => {
            observer.next(data);
          });
        }
      });
    });
  }

  disconnect() {

  }

  applyMutations(tmpData: Server[]): Observable<Server[]> {
    const dataMutations = [
      observableOf(tmpData),
      this.paginator.page,
      this.sort.sortChange
    ];

    // Set the paginators length
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...tmpData]));
    }));
  }

  <mat-table #table [dataSource]="dataSource"
         [trackBy]="trackByIndex"
         multiTemplateDataRows
         matSort
         aria-label="Elements">

  ***in component:***

  trackByIndex(index, item) {
    return index;
  }


***在组件中：***
trackByIndex（索引，项）{
收益指数；
}

this.serversService.getServersSubj（）
返回
BehaviorSubject