订阅的 Angular 返回值

Question

我需要从服务调用的订阅中返回一个值。这是我的代码:

export class RideDataSource extends DataSource<any> {

  rides: Ride[];

  constructor(private _rideService: RidesService,
              private _paginator: MatPaginator) {
    super();
  }

  connect(): Observable<Ride[]> {

this._rideService.getActiveRides(this._paginator.pageIndex, this._paginator.pageSize).subscribe(
      ridePage => {
        this.rides = ridePage.content;
        this._paginator.length = ridePage.totalElements;
      }
    );

    // i need to return  Observable.of(this.rides);
  }

  disconnect() {
    // No-op
  }

}

返回 Observable.of(this.rides) 将不起作用，因为 this.rides 将是 undefined。有什么办法吗？

Answer 1

不要订阅服务，使用map运算符代替并订阅 connect()。

骑行数据源:

export class RideDataSource  {

  connect(): Observable<Ride[]> {
    return this._rideService.getActiveRides(
      this._paginator.pageIndex, 
      this._paginator.pageSize
    ).pipe(
      map(ridePage => {
        this.rides = ridePage.content;
        this._paginator.length = ridePage.totalElements;
        return this.rides;
      })
    );
  }
}

一些组件:

export class SomeComponent implements OnInit {

  constructor(private rideDataSource: RideDataSource) { }

  ngOnInit() {
    this.rideDataSource.connect().subscribe(rides => console.log(rides));
  }
}

如果您需要组件模板中的数据，那么您可以执行以下操作:

一些组件类:

export class SomeComponent {

  rides = this.rideDataSource.connect()

  constructor(private rideDataSource: RideDataSource) { }
}

一些组件模板:

{{ rides | async }}