如何通過這些服務將查詢引數放入Obsrvable呼叫中？

我怎樣才能把這個查詢引數

用戶？頁面=2

在這個 Observable 方法中？
我嘗試將 queryParams: 'abd here' 放入一個引數，但我無法放入尚未呼叫的資料

    getUsers(): Observable < Users > {
      this.spinner.show();
      const options: Options = {
        type: 'get',
        path: '/users',
        queryParams: '', // here is the ?page=2


      };
      return this.apiCall.call(options).pipe(
        tap((res) => {

          console.log('El servicio de usuarios funciona', res);
        }),
        finalize(() => {
          this.spinner.hide();
        }),
        catchError((er) => this.apiCall.handleError(er))
      );
    }

我從同一個呼叫中獲取頁面資料 這些

但我需要使用這些“apiCall”服務

@Injectable({
  providedIn: 'root',
})
export class ApiCallService {
  protected basePath = 'https://localhost';
  public configuration = new Configuration();
  public defaultHeaders = new HttpHeaders();
  public encoder: HttpParameterCodec;

  constructor(protected httpClient: HttpClient, @Optional() configuration: Configuration) {
    if (configuration) {
      this.configuration = configuration;
    }

    if (typeof this.configuration.basePath !== 'string') {
      if (typeof this.basePath !== 'string') {
        this.basePath = this.basePath;
      }
      this.configuration.basePath = this.basePath;
    }
    this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
  }

  public createCall(options: Options): Observable<any> {
    // Create Default Header
    let headers = this.defaultHeaders;

    // Check url config
    this.configuration.basePath = this.configuration.basePath ? this.configuration.basePath : this.basePath;

    // Add headers
    const queryHeaders: any = {};

    if (options.hasOwnProperty('headers')) {
      Object.assign(queryHeaders, options.headers);
    }

    for (const h in queryHeaders) {
      if (queryHeaders.hasOwnProperty(h)) {
        headers = headers.set(h, queryHeaders[h]);
      }
    }

    // authentication (bearer) required
    if (this.configuration.accessToken || options.accessToken) {
      const accessToken = this.configuration.accessToken || options.accessToken;
      headers = headers.set('Authorization', 'Bearer '   accessToken);
    }
    let httpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;

    if (httpHeaderAcceptSelected === undefined) {
      // to determine the Accept header
      const httpHeaderAccepts: string[] = ['application/json'];
      httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
    }

    if (httpHeaderAcceptSelected !== undefined) {
      headers = headers.set('Accept', httpHeaderAcceptSelected);
    }

    // Choose http Call
    let params = '';

    if (options.params) {
      options.params.forEach((param) => {
        params = params   `/${encodeURIComponent(String(param))}`;
      });
    }
    const url = `${this.configuration.basePath}${options.path}`;

    const typesCall = {
      get: this.httpClient.get(`${url}${params}`, {
        params: options.queryParams,
        headers,
      }),
      put: this.httpClient.put(url, options.body, {
        params: options.queryParams,
        headers,
      }),
      post: this.httpClient.post(url, options.body, {
        params: options.queryParams,
        headers,
      }),
      patch: this.httpClient.patch(url, options.body, {
        params: options.queryParams,
        headers,
      }),
      delete: this.httpClient.delete(`${url}${params}`, {
        params: options.queryParams,
        headers,
      }),
    };
    return typesCall[options.type];
  }

  call(options: Options): Observable<any> {
    return this.createCall(options).pipe(
      map((res) => res),
      catchError(this.handleError)
    );
  }

  public handleError(error: Response): Observable<any> {
    // console.error('An error occurred', error); // for demo purposes only
    return throwError(() => error || 'server error');
  }
}

我需要通過這些服務來做，我想我可以在這些服務中獲得引數呼叫，但我不記得如何
感謝我一直堅持

uj5u.com熱心網友回復：

要將分頁結果轉換為用戶陣列，您可以執行以下操作：

export type User = {
  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
};

export type UserPage = {
  page: number;
  per_page: number;
  total: number
  total_pages: number;
  data: User[];
};

  getUserPage(startPage): Observable <UserPage> {
    const params: HttpParams = new HttpParams();
    params.append("page", startPage);

    const options: Options = {
      type: 'get',
      path: '/users',
      queryParams: params,
    };
    return this.apiCall.call(options).pipe(
      tap((res) => {
        console.log('El servicio de usuarios funciona', res);
      }),
      catchError((er) => this.apiCall.handleError(er))
    );
  }


  getUsers(): Observable<User[]> {
    this.spinner.show();
    return this.fetchPage(1).pipe(
      expand(({ page, total_pages }) =>
        page < total_pages ? this.fetchPage(page 1) : EMPTY
      ),
      concatMap(({ data }) => data),
      toArray(),
      finalize(() => {
        this.spinner.hide();
      }),
    );
  }

這是基于RxJs Observable Pagination

標籤：javascript 有角度的 休息 服务 角13

上一篇：在客戶端重繪分頁資料的最佳方式？

下一篇：如何使用HTTP-CLIENT在APIDELETE中發送物體