Searching by Id from angular in web api issue

@pieee93 wrote:

Hello to everyone.
I installed angular in web api for simulating a data server and when i take all the objects (in my case the db has only “evento” objects) to display in the “Lista” page (my homepage) there is no problem. When i want to fetch one “evento” from the db for details in the page “dettaglievento” i’m not able to take one of them. The first time i get an Not Found 404 error on “api/evento/11” (11 is the id of my first evento object) but i fixed it using " /?idevento=${idevento}" to my base url. The problem now is that i have no more error displayed but i’m unable to display in “dettaglievento” details about a single “evento” .
This is my “db”

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';
import {Evento} from './model/evento.model';

@Injectable({
  providedIn: 'root'
})
export class InMemoryDataService implements InMemoryDbService {
    createDb() {
        const eventi = [
            { idevento: 11 ,
                nomeevento: 'Metallica',
                sottotitolo : 'Master of puppets',
                descrizione: 'I Metallica tornano ad emozionare le platee di tutto il mondo con il loro tour, ' +
                    'partecipa anche tu!!!',
            },
            { idevento: 12,
                nomeevento: 'MetallicA',
                sottotitolo : 'Master of puppets',
                descrizione: 'I MetallicA tornano ad emozionare le platee di tutto il mondo con il loro tour, ' +
                    'partecipa anche tu!!!',
            },
            { idevento: 13,
                nomeevento: 'Antonio',
                sottotitolo : 'Lina mi vida',
                descrizione: 'I Metallica tornano ad emozionare le platee di tutto il mondo con il loro tour, ' +
                    'partecipa anche tu!!!',
            },




        ];


        return{eventi};
 }
}

This is my Evento.service

import { HttpClient, HttpHeaders } from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable, of} from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { MessageService } from './message.service';


import { Evento } from 'src/app/model/evento.model';
const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};


@Injectable({
    providedIn: 'root',
})

export class EventoServiceService {

    private eventiUrl = 'api/eventi';  // URL to web api

    constructor(private http: HttpClient, private messageService: MessageService) {

    }
    list(): Observable<Evento[]> {

        return this.http.get<Evento[]>(this.eventiUrl);
    }

    getEvento(idevento: number): Observable<Evento> {
        const url = `${this.eventiUrl}/?idevento=${idevento}`;
        return this.http.get<Evento>(url).pipe(
            tap(_ => this.log(`fetched hero id=${idevento}`)),
            catchError(this.handleError<Evento>(`getHero id=${idevento}`))
        );
    }
    private handleError<T>(operation = 'operation', result?: T) {
        return (error: any): Observable<T> => {

            // TODO: send the error to remote logging infrastructure
            console.error(error); // log to console instead

            // TODO: better job of transforming error for user consumption
            this.log(`${operation} failed: ${error.message}`);

            // Let the app keep running by returning an empty result.
            return of (result as T);
        };
    }
    private log(message: string) {
        this.messageService.add(`EventoServiceService: ${message}`);
    }

}

my dettaglievento.page.ts

import {Component, Input, OnInit} from '@angular/core';
import {Observable} from 'rxjs';


import {Evento} from '../../model/evento.model';
import {ActivatedRoute, ParamMap} from '@angular/router';
import {EventoServiceService} from '../../services/evento.service';

@Component({
  selector: 'app-dettaglievento',
  templateUrl: './dettaglievento.page.html',
  styleUrls: ['./dettaglievento.page.scss'],
})
export class DettaglieventoPage implements OnInit {
  @Input() evento: Evento;

  constructor(private route: ActivatedRoute,
              private eventoService: EventoServiceService,
             ) { }

  ngOnInit() {
    this.getEvento();
  }

   getEvento() {

     const idevento = +this.route.snapshot.paramMap.get('?idevento');
     this.eventoService.getEvento(idevento).subscribe(evento => this.evento = evento);

   }
  }

and my dettaglievento.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button  defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title text-center="center">{{"DETAGLI_EVENTO_TITLE"| translate}}</ion-title>
    <ion-icon id="iconcina" align-items-end="right" name="contact" routerLink="/dettagliorganizzatore" routerDirection="forward">
    </ion-icon>
  </ion-toolbar>
</ion-header>

<ion-content padding="true">


  <ion-card *ngIf="evento">

 <ion-slides [pager]="true">
  <ion-slide>

    <img src="../assets/musipr/LOGO2.JPG">
  </ion-slide>
  <ion-slide>
    <img src="../assets/musipr/LOGO2.JPG">
  </ion-slide>
 </ion-slides>

  <ion-card-header>
    <ion-card-title>{{evento.nomeevento}}</ion-card-title>
    <ion-card-subtitle>{{evento.sottotitolo}}</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    {{evento.descrizione}}
  </ion-card-content>

  </ion-card>

  <ion-button  color="tertiary" >{{"BUY_TITLE"| translate}}</ion-button>


</ion-content>


<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button  >
    <ion-icon  id="navigation" name="compass"></ion-icon>
  </ion-fab-button>
</ion-fab>

my app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'tab', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'lista', loadChildren: './pages/lista/lista.module#ListaPageModule' },
  { path: 'mappa', loadChildren: './pages/mappa/mappa.module#MappaPageModule' },
  { path: 'chatlist', loadChildren: './pages/chatlist/chatlist.module#ChatlistPageModule' },
  { path: 'dettaglievento/:idevento', loadChildren: './pages/dettaglievento/dettaglievento.module#DettaglieventoPageModule' },
  // tslint:disable-next-line:max-line-length
  { path: 'dettagliorganizzatore', loadChildren: './pages/dettagliorganizzatore/dettagliorganizzatore.module#DettagliorganizzatorePageModule' },
  { path: 'donazione', loadChildren: './pages/donazione/donazione.module#DonazionePageModule' },
  { path: 'acquisto', loadChildren: './pages/acquisto/acquisto.module#AcquistoPageModule' },
  { path: 'pagamento', loadChildren: './pages/pagamento/pagamento.module#PagamentoPageModule' },
  { path: 'profiloutente', loadChildren: './pages/profiloutente/profiloutente.module#ProfiloutentePageModule' },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: 'signup', loadChildren: './pages/signup/signup.module#SignupPageModule' },
  { path: 'editaevento', loadChildren: './pages/editaevento/editaevento.module#EditaeventoPageModule' },
  { path: 'tab', loadChildren: './pages/tab/tab.module#TabPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Posts: 1

Participants: 1

Read full topic