Question

我有一个Angular应用，使用HttpClient从API检索数据。

我想从API获取原始数据并将其发送到相应的服务。这些服务具有将原始数据映射到模型对象并将其返回给组件的方法。

问题是，我从API获取数据（返回Observable），我订阅了service方法，然后我不知道如何将数据传递给组件。

Api服务，可从API检索数据。然后，我发送原始数据和酒店服务，并在其中映射原始数据以进行建模并发送到组件

@Injectable()
export class ApiService {
  ...
  public getHotelById(hotelId: number): Observable<any> {
      return this.http
          .get(API_URL + '/hotel/' + hotelId)
          .map((response) => {
              return response;
          })
  }
  ...
}


@Injectable()
export class HotelService {
  ...
  public getHotelById(id: number): Subscription {
    return this.api.getHotelById(id).subscribe(
        (response) => {
            let hotel = new HotelModel(response.hotel);

            hotel.mapCountry(response.country);

            return hotel;
        }
    );
  }
  ...
}

有人可以帮助我如何从组件中的服务检索数据吗？我收到错误消息，hotelservice返回的对象是订阅，我无法订阅。

有什么办法可以做到这一点？我不想在API服务中做一些业务逻辑。在那个地方，我只想检索数据。

组成方法

  ngOnInit() {
    this.activatedRoute.queryParamMap.subscribe(
        (map) => {
            this.hotelId = this.activatedRoute.snapshot.params['id'];

            this.hotel = this.hotelService.getHotelById(this.hotelId)
                .subscribe(
                (hotel) => {
                  this.hotel = hotel;
                }
            )
        }
    )
  }

Answer 1

map，而不是订阅。订阅是“道路的尽头”，而地图只是“变道”。

export class HotelService {
  ...
  public getHotelById(id: number) {
    return this.api.getHotelById(id).pipe(map(
        (response) => {
            let hotel = new HotelModel(response.hotel);

            hotel.mapCountry(response.country);

            return hotel;
        }
    ));
  }
  ...
}

Answer 2

我认为对您来说，一种好的方法是将结果映射到特定的函数“ getHotelById”（您可以像创建ORM）

@Injectable()
export class ApiService {
  ...
  public getHotelById(hotelId: number): Observable<any> {
      return this.http
          .get(API_URL + '/hotel/' + hotelId)
          .map((response) => {
            let hotel = new HotelModel(response.hotel);

            hotel.mapCountry(response.country);

            return hotel;
          })
  }
  ...
}


@Injectable()
export class HotelService {
  ...
  public getHotelById(id: number): Observable<any> {
    return this.api.getHotelById(id);
  }
  ...
}

在您的组件中没有任何变化。

Answer 3

您真的需要两项服务吗？

[^.]*?                 # Anything but a dot, ungreedy
  \b oak               # First word (with word boundary)
(?:\W+[^\W.]+){0,5}?   # Some (0-5) random words: (separator + word except dot) x 5, ungreedy
 \W+ wood              # Second word. Starts with some separator
(?:\W+[^\W.]+){0,5}?   # Again, random words, ungreedy
 \W+ table             # third word. Starts with some separator
(?:\W+[^\W.]+){0,5}?   # Again, random words, ungreedy
 \W+ variety           # Final required word
[^.]*                  # The rest of the sentence (non dot characters) up to the end
\.+                    # We match the final dot (or ... if more exist)

抽象类具有一些用于查询目标URL的帮助程序，并为get调用提供了标准的http选项。

订阅可观察

3 个答案: