javascript - ¿Cómo obtener solo un usuario en lugar de una lista?

Intento pasar de una lista de usuarios a un solo usuario y mostrar su perfil en otra página.

Quiero hacerlo con el routerLink y pasar un id de este usuario específico a la siguiente página.

El enrutamiento está funcionando, me dirigen a la página de perfil pero cuando registro los resultados de la solicitud HTTP todavía recibo de vuelta la lista completa de usuarios como en la página de usuarios en lugar de los detalles de un usuario.

He intentado muchas cosas como cambiar la ruta del URL en mi user.service.ts, pero eso no resolvió el problema. Incluso obtuve errores de solicitud 404 al usar esta ruta ${this.url}/users/${id}/ en lugar de ${this.url}/users/?i=${id}/ (donde sí funciona).

Sin embargo, la documentación de la API dice que para recuperar un solo usuario es http://1234//users/{id}/ en este esquema mientras que id es un entero. Pero cuando intento aplicar ese esquema recibo el error 404.

Por eso tengo que usar la versión ?I=, pero allí el problema es que solo obtengo la lista completa de usuarios en la página siguiente.

MI CÓDIGO:

usuario.servicio.ts

// get a user's profile
  getUserDetails(id): Observable<any> {
    return this.http.get(`${this.url}/users/?i=${id}/`); // why add ?i
  }

usuario.página.ts

// get all users in the users page
  getAllUsers() {
    this.userList = this.userService.getList()
    .pipe(map(response => response.results));
  }

usuario.página.html

   <ion-avatar  class="user-image"  slot="start" [routerLink]="['/','profile', 'user.id']">
            <ion-img src="assets/22.jpeg"> </ion-img>
     </ion-avatar>

perfil.página.ts

 information = null;
...
  ngOnInit() {
     // Get the ID that was passed with the URL
     let id = this.activatedRoute.snapshot.paramMap.get('id');

     // Get the information from the API
     this.userService.getUserDetails(id).subscribe(result => {
       this.information = result;
       console.log(result);
     });
   }

Respuesta #1

Parece que la URL está mal. Si fuera yo, haría un console.log de la URL y la compararía con la documentación. Aquí hay un fragmento para probar algunas variaciones:

    const id = 1;

    const options = [
      `${this.url}/users/?i=${id}/`,
      `${this.url}/users/?i=${id}`,
      `${this.url}/users/i/${id}/`,
      `${this.url}/users/i/${id}`,
      `${this.url}/user/?i=${id}/`,
      `${this.url}/user/?i=${id}`,
      `${this.url}/user/i/${id}/`,
      `${this.url}/user/i/${id}`,
    ];

    for (const option of options) {
      try {
        const response = await this.http.get(option);
        console.log(options, response);
      } catch (e) {

      }
    }

También consideraría eliminar la segunda solicitud http. Si la primera solicitud devuelve todos los datos necesarios, podrías simplemente almacenarlos en una variable en el servicio.