【问题标题】:Rest api call with id parameter in AngularAngular中带有id参数的Rest api调用
【发布时间】:2019-03-05 00:07:24
【问题描述】:

我有一个调用 rest api 的 Angular 应用程序,但该 rest api 数据由它的客户定义:api/incident?customer_id=7 我如何在 api url 或服务中反映这一点?和我的应用程序?我的服务如下:

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
    import { HttpClientModule } from '@angular/common/http';
    import { Observable, of, throwError } from 'rxjs';
    import { catchError, retry } from 'rxjs/operators';


    @Injectable({
      providedIn: 'root'
    })
    export class 

nowService {

  serviceApiUrl: string = 'api/incident';

  constructor(
    private http: HttpClient,

  ) { }

  getAll(): Observable<any> {
    return this.http.get<any>(this.serviceApiUrl)
      .pipe(
        catchError(this.handleError)
      );
  }


  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.log(error.error.message)

    } else {
      console.log(error.status)
    }
    return throwError(
      console.log('Something has happened; Api is not working!'));
  };

}

component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
import {HttpClientModule} from '@angular/common/http';
// Services 
import { nowService } from '../../services/servicenow.service';
import { Incidents } from '../../models/incidents.model';


@Component({
  selector: 'app-service-incident',
  templateUrl: './service-incident.component.html',
  styleUrls: ['./service-incident.component.scss']
})

export class ServiceIncidentComponent implements OnInit {

  public incidents: any; 
  public loading = true;
  public errorApi = false;

  constructor(private service: nowService) {

  }

  ngOnInit() {
    this.service.getAll().subscribe((data) => {
      this.loading = true;
      this.incidents = data.result;
      this.loading = false;
      console.log('Result - ', data);
      console.log('data is received');
    })
  }
}

所以它基于客户 ID 参数。我只是想知道如何做到这一点,因为我以前没有遇到过这个?

谢谢

【问题讨论】:

  • 只需将其添加到 serviceApiUrl 的末尾即可。是你自己的API吗? API 将是处理查询字符串参数的地方
  • 这个例子?会是api/incident?customer_id

标签: javascript angular


【解决方案1】:

代码可以如下:

   getAll(customerId): Observable<any> {
  return this.http.get<any>(this.serviceApiUrl + "?customer_id" + customerId )
    .pipe(
    catchError(this.handleError)
  );


 ngOnInit() {
this.service.getAll(this.customerId).subscribe((data) => {
  this.loading = true;
  this.incidents = data.result;
  this.loading = false;
  console.log('Result - ', data);
  console.log('data is received');
})
}

或者你可以使用 HttpParams 类 例子: https://angular.io/api/common/http/HttpParams

   getAll(customerId): Observable<any> {
         const params = new HttpParams("customer_id", customerId)
       return this.http.get<any>(this.serviceApiUrl ,{ params })
    .pipe(catchError(this.handleError));

【讨论】:

  • 我的服务 api 是什么? serviceApiUrl: string = 'api/incident';
  • 会一样吗?
  • @Sole 是的,你的 serviceApiUrl 仍然是 'api/incident';
  • getAll() 的返回语句必须是return this.http.get&lt;any&gt;(this.serviceApiUrl + "?customer_id=" + customerId )
  • 你也可以这样写:return this.http.get&lt;any&gt;(`${this.serviceApiUrl}?customer_id=${customerId}`)
猜你喜欢
  • 1970-01-01
  • 2014-12-31
  • 2021-07-24
  • 2014-01-12
  • 2018-10-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多