来自订阅的角度返回值

【问题标题】：Angular return value from subscribe来自订阅的角度返回值
【发布时间】：2021-05-21 00:30:17
【问题描述】：

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

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。有没有办法做到这一点？

【问题讨论】：

标签： angular rxjs angular-material angular5

【解决方案1】：

不要订阅服务，请改用map运算符并订阅connect()。

RideDataSource：

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 }}

【讨论】：