Using the httpClient to fetch data from a local json file, everything operates smoothly in the propertylist. However, when selecting a property and wanting to show its details on a new page, I'm struggling to grasp the concept despite watching numerous tutorials and reading guides.
It appears that the issue lies within routing, activated route, and parameters. I've set up the pages, service, imported router and activatedrouter, injected my service, and configured the :id path in the routing module.
Snippet of JSON Data
{
"property": [
{
"propertyID": "101552000007",
"branchID": "1",
"clientName": "Demo",
"branchName": "Br",
"department": "Sales",
"referenceNumber": "10006",
"addressName": "",
"addressNumber": "87",
"addressStreet": "Hackney Road",
"address2": "",
"address3": "London",
"address4": "",
"addressPostcode": "E2 8PP",
"country": "United Kingdom",
}
]
For-Sale Page
<ion-col *ngFor="let property of propertyList.property; let i=index" size="6">
<ion-card [routerLink]="['/read-post',property.propertyID]">
Service Configuration
getProperty(propertyID): Observable<IProperties[]> {
return this.http.get<IProperties[]>('/assets/data/xx.json/' + propertyID);
}
Read-Post Page Initialization
ngOnInit() {
let propertyID = this.route.snapshot.params['id'];
this.saleService.getProperty(propertyID).subscribe((property) => {
console.log(property);
});
}
App-Routing Configuration
{ path: 'read-post/:id', loadChildren: './read-post/read-post.module#ReadPostPageModule' },
Upon clicking a property on the for-sale page, it should navigate to "http://localhost:8100/read-post/101552000015" (the propertyID in the json)
Console Output
GET http://localhost:8100/assets/data/xx.json/101552000015 404 (Not Found)