在MD-表排序角料2不工作

Question

这里是component.ts

export class RoleListComponent { 
    displayedColumns = ['roleAvatar', 'roleName']; // list of columns to show on UI 
    dataSource: RoleDataSource; 

    @ViewChild(MdSort) sort: MdSort; 

    constructor(private roleService: RoleService, private router: Router) { } 

    ngOnInit() { 
     this.dataSource = new RoleDataSource(this.roleService, this.sort); 
    } 
} 

export class RoleDataSource extends DataSource<any> { 
    roles: Observable<Role[]>; 
    constructor(private roleService: RoleService, private _sort: MdSort) { 
     super(); 
    } 
    /** Connect function called by the table to retrieve one stream containing the data to render. */ 
    connect(): Observable<Role[]> { 

     this.roles = this.roleService.getRoles(); 
     const displayDataChanges = [ 
      this.roles, 
      this._sort.mdSortChange, 
     ]; 
     return Observable.merge(...displayDataChanges).map(() => { 
      return this.getSortedData(); 
     }); 

    } 
    disconnect() { } 

    compare(a: string, b: string, isAsc: boolean) { 
     return (a < b ? -1 : 1) * (isAsc ? 1 : -1); 
    } 
    /** Returns a sorted copy of the database data. */ 
    getSortedData(): Role[] { 
     let sortedData:Role[]; 
     this.roles.subscribe(data => { 
      debugger 
      if (!this._sort.active || this._sort.direction == '') { return data; } 

      sortedData = data.sort((a, b) => { 
       let isAsc = this._sort.direction == 'asc'; 
       switch (this._sort.active) { 
        case 'roleAvatar': return this.compare(a.name[0], b.name[0], isAsc); 
        case 'roleName': return this.compare(a.name, b.name, isAsc); 
       } 
      }); 
      console.log(sortedData) 
      return sortedData; 
     }); 
     return sortedData; 
    } 
} 

有的roleService一个roleService.getRoles()方法返回Role[]类型的Observable。我已经合并了mdSort的可观察值和this.roles可观察值并返回了​​。

现在在getSortedData（）方法中，我订阅了this.roles observable以获取角色数组并将其排序并从订阅内返回。有getSortedData（）本身的返回，并在调用这个方法时返回方法的返回语句而不是订阅的返回，所以排序的数据是未定义的，并且在UI上没有记录。我很困惑，我该如何解决这个问题？

Answer 1

尝试从​​返回并在connect()处使用switchMap。

export class RoleDataSource extends DataSource<any> { 

    roles: Observable<Role[]>; 

    constructor(private roleService: RoleService, private _sort: MdSort) { 
     super(); 
    } 

    /** Connect function called by the table to retrieve one stream containing the data to render. */ 
    connect(): Observable<Role[]> { 

     this.roles = this.roleService.getRoles(); 

     const displayDataChanges = [ 
      this.roles, 
      this._sort.mdSortChange, 
     ]; 

     return Observable.merge(...displayDataChanges) 
     .switchMap(() => this.getSortedData()); 
    }); 

    } 
    disconnect() { } 

    compare(a: string, b: string, isAsc: boolean) { 
     return (a < b ? -1 : 1) * (isAsc ? 1 : -1); 
    } 

    /** Returns a sorted copy of the database data. */ 
    getSortedData(): Observable<Role[]> { 

    return this.roles.map(data => { 
     if (!this._sort.active || this._sort.direction == '') { return data; } 

     return data.sort((a, b) => { 
     let isAsc = this._sort.direction == 'asc'; 
     switch (this._sort.active) { 
      case 'roleAvatar': return this.compare(a.name[0], b.name[0], isAsc); 
      case 'roleName': return this.compare(a.name, b.name, isAsc); 
     } 
     }); 

    }); 
    } 
}