Вызов Rest api с параметром id в Angular

#javascript #angular

#javascript #angular

Вопрос:

У меня есть приложение Angular, которое вызывает rest api, но эти данные rest api определяются тем, на какого клиента это похоже: api/incident?customer_id=7 Как бы мне отразить это в URL-адресе api или сервисе? а мое приложение? Мой сервис заключается в следующем:

     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');
    })
  }
}
  

Таким образом, он основан на параметре customer ID. Я просто хочу знать, как это сделать, поскольку я не сталкивался с этим раньше?

Спасибо

Комментарии:

1. Просто добавьте его в конец serviceApiUrl. Это ваш собственный API? В API будут обрабатываться параметры строки запроса

2. Пример этого? было бы api/incident?customer_id

Ответ №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));
  

Комментарии:

1. Каким будет мой service api? serviceApiUrl: string = 'api/incident';

2. Будет ли это то же самое?

3. @Sole да, ваш serviceApiUrl по-прежнему будет 'api/incident';

4. Оператор Return для GetAll() должен быть return this.http.get<any>(this.serviceApiUrl "?customer_id=" customerId )

5. Вы также могли бы написать это как: return this.http.get<any>(`${this.serviceApiUrl}?customer_id=${customerId}`)