The issue is straightforward - I have a component that retrieves the last searched items saved in sessionStorage as an array of ListItem objects:
export class SearchlistComponent {
results = JSON.parse(<string>sessionStorage.getItem("lastSearch"));
}
The HTML displays these items with corresponding links for 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>
While the list appears correctly, clicking on an item does not attach the value to the route. For example, instead of '/hospital/hospitalId', it only shows '/hospital'.
This issue arises specifically when running the site with SpringBoot, but not with ng serve. I've verified that data gets stored and retrieved properly. What could be causing this problem?