Using Angular Material Mat Table to display data fetched from an API is great, but I'm facing a challenge with handling categories from another API. Currently, my models include issues and categories, where the category ID is displayed instead of the category name.
Any suggestions on how to display the category name instead?
My models
export class Issue {
IssueID: string;
IssueTitle: string;
IssueContent: string;
CategoryID: number;
}
export class IssueCategory {
public CategoryID: number;
public CategoryName: string;
}
My html
...
<ng-container matColumnDef="CategoryTitle">
<mat-header-cell *matHeaderCellDef mat-sort-header>Category</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.categoryID}}</mat-cell>
</ng-container>
...
EDIT
My getAllIssues()
CategoryArray: TicketCategory[] = [];
getAllIssues(): void {
this.httpClient.get<Ticket[]>(this.API_URL).subscribe(data => {
this.dataChange.next(data);
this.data.map(issue => ({
category: this.CategoryArray.find(category => category.CategoryID === issue.CategoryID)
}));
}
}
Thank you for any help!