2

The problem is simple, I have this component, that gets the last searched items I saved in the sessionSotrage, which is an array of ListItem objects:

export class SearchlistComponent {
   results = JSON.parse(<string>sessionStorage.getItem("lastSearch"));

}

And the html just prints them with the according link to access the pages via routing:

<ul class="list-group mt-3">
 <li class="list-group-item" *ngFor="let result of results">
   <div *ngIf="result.itemType == 'hospital'">
     <div  routerLink='/hospital/{{result.itemId}}'>
       <h4>{{result.itemName}}</h4>
       <h5>{{result.itemLocation}}</h5>
     </div>
   </div>
   <div *ngIf="result.itemType == 'ward'">
     <div routerLink='/ward/{{result.itemId}}'>
       <h4>{{result.itemName}}</h4>
       <h5>{{result.itemLocation}}</h5>
     </div>
   </div>
   <div *ngIf="result.itemType == 'medic'">
     <div routerLink='/medic/{{result.itemId}}'>
       <h4>{{result.itemName}}</h4>
       <h5>{{result.itemLocation}}</h5>
       <h6 *ngIf="result.itemType == 'medic'">{{result.itemDescription}}</h6>
     </div>
   </div>
 </li>

When accessing the page the list gets printed like normal, but when I click on the item I want to access the page of, the route doesn't have the value attached, so instead of having '/hospital/hospitalId' I get '/hospital'.

This only happens if I run the site using SpringBoot but not by using ng serve. I already checked if it was a parsing error and it wasn't, the data gets stored correctly and it gets printed accordingly. What could the problem be?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Giovanni Grana
  • 81
  • 6

1 Answers1

2

RouterLink needs an array as value like this: [routerLink]="['user', user.id, 'details']" = "/user/8/details" as example.

<ul class="list-group mt-3">
 <li class="list-group-item" *ngFor="let result of results">
   <div *ngIf="result.itemType == 'hospital'">
     <div [routerLink]="['/hospital', result.itemId]">
       <h4>{{result.itemName}}</h4>
       <h5>{{result.itemLocation}}</h5>
     </div>
   </div>
   <div *ngIf="result.itemType == 'ward'">
     <div [routerLink]="['/ward', result.itemId]">
       <h4>{{result.itemName}}</h4>
       <h5>{{result.itemLocation}}</h5>
     </div>
   </div>
   <div *ngIf="result.itemType == 'medic'">
     <div [routerLink]="['/medic', result.itemId]">
       <h4>{{result.itemName}}</h4>
       <h5>{{result.itemLocation}}</h5>
       <h6 *ngIf="result.itemType == 'medic'">{{result.itemDescription}}</h6>
     </div>
   </div>
 </li>
Flo
  • 2,232
  • 2
  • 11
  • 18
  • tried this solution too and it now goes to '/hospital/undefined' – Giovanni Grana Jan 17 '23 at 21:39
  • Then show me code behind were you set the results. – Flo Jan 17 '23 at 22:13
  • The service does this `return this.http.get>('/api/search', { params, responseType: 'json' }) .pipe(tap(response => { sessionStorage.setItem("lastSearch", JSON.stringify(response)); }));` and from what I can see from the debugger it does work – Giovanni Grana Jan 18 '23 at 10:16
  • Yes, but where you set the "itemId" value? I think it is `null`. – Flo Jan 18 '23 at 10:48
  • I get a list of ListItem from the http.get, stringify it and set it in the session. Then get it back and parse it in an object, if I print the JSON string the ID it's there, if I open the search page the list gets printed, with all the other variable accessible via {{result.itemName}} etc. But if I pass the value in the routerLink it's undefined for some reason. As I said already this only happens when I use the site by booting Spring, but doesn't happen when I use ng serve – Giovanni Grana Jan 18 '23 at 10:57
  • So apparently there was a spelling problem in the backend. The controller sent an array with itemID instead of itemId – Giovanni Grana Jan 18 '23 at 16:35