I’m building an Angular frontend for an ERP-like system, and I’m trying to generate a link like:
<a [routerLink]="['/erp/real-estates/objects', objectId]">Gå till objekt # som förvaltare</a>
The goal is to show this link under each ticket, using the correct objectId associated with the caseId (which is the ticket ID).
Here’s what I’m doing in getTicket():
this.apiService.fetch(`tickets/${id}`, null).subscribe({
next: (result) => {
this.ticket = result[0].data;
const caseId = this.ticket?.head?.id ?? this.ticketId;
this.http.get(`/api/objects?caseId=${caseId}`).subscribe({
next: (res) => {
const raw = Array.isArray(res) ? res[0] : res;
const data = raw?.data;
const row = Array.isArray(data) ? data[0] : data;
this.objectId = row?.objectId ?? row?.id ?? null;
},
error: () => {
this.objectId = null;
}
});
}
});
But this.objectId is showing as undefined in the component, and the link is greyed out. Also, TypeScript complains:
Property 'objectId' does not exist on type 'TicketComponent'
I’ve tried:
Logging the response from /api/objects?caseId=... (it contains the objectId)
Making sure objectId is declared in the component
Ensuring the API returns the right data
What’s the best way to fix this so the link correctly renders when objectId exists?
What I’m asking:
- Is this the correct way to extract
objectIdfrom a case? - How should I safely bind it to the link without Angular template errors?
- Should I move this logic elsewhere or restructure the component?
@Component({..})export class TicketComponent{ objectId:any=null;...}`