Угловой сервис, передающий целочисленные параметры url, вызываемые дважды, добавляя значение Param к вызову API

Question

Я вызываю службу в компоненте и передаю параметр из routetlink

Что у меня ниже

Компонент

ngOninit(){
let id = parseInt(this.route.snapshot.paramMap.get('id'));// value is 1
    this.getProducts(id);
}


 getProducts(id: number) {
    this.myService.getProducts(id)
      .subscribe(val => {
        this.value= val;
      }
  }

в обслуживании

url ="..getdetails?id="

getProducts(id: number): Observable<Products> {
    this.url = `${this.Url}${id}`
    return this.http.get<Products>(this.Url);
  }

Здесь я использую url = ".. getdetails? Id =", потому что мне нужно передать целое число в URL. Метод Httpurlparams может отправлять только строковое значение.

Здесь проблема, я вижу два запроса xhr в сети

"..getdetails?id=1"
"..getdetails?id=11"

Я ожидаю только одного сетевого вызова Я сослался на документы и увидел, что холодная наблюдаемая будет звонить дважды. Но в моем случае это добавление неверного идентификатора на второй запрос. Пожалуйста, покажите мне, как я могу это сделать ...

Answer 1

То, что ngOninit() вызывается дважды, - это другая проблема. Другой параметр строки запроса вызван

this.url = `${this.Url}${id}`

Здесь происходит то, что this.url видоизменяется при первом обращении в службу. Во втором вызове используется это мутированное значение this.url, и к нему добавляется 1, вызывая проблему.

Использовать область видимости с ключевым словом let.

Пример воспроизведения вашей проблемы и решения:

let url ="..getdetails?id="
let id = 1;

url = `${url}${id}`;
console.log(url);
url = `${url}${id}`;
console.log(url);

function setUrl(id) {
  console.log('Within a function...');

  let url = "..getdetails?id="

  url = `${url}${id}`;
  console.log(url);

}

setUrl(1);
setUrl(1);

См. Вывод:

$ node app.js
..getdetails?id=1
..getdetails?id=11
Within a function...
..getdetails?id=1
Within a function...
..getdetails?id=1

Решение:

 setUrl(url:string, id:number) { 
  url = `${url}${id}`;
  console.log(url);
  return url;
}

getProducts(url:string, id: number): Observable<Products> {

  return this.http.get<Products>(this.setUrl(url, id));
}