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 { }