I often encounter situations where I need to select a specific entry from a set of data in a component, whether through a select box or as part of a table.
However, the way I intend to utilize this data typically requires additional fields like the "label: string" field for a select box. To achieve this, I usually enhance the user data by adding the necessary fields. This can be done either by creating my own type (such as "ItemWithLabel") or by implementing it inline (Item & {label:string}) as demonstrated in the following example:
@Component({
template: '
<my-select-component [data]="items$ | async">
</my-select-component>
'
})
export class MyComponent {
items$: Observable<(Item & {label:string})[]>
constructor(private myDataService: MyDataService) {
this.items$ = this.myDataService.getItems()
.pipe(
// map the data to ensure it fits (Item & {label:string})[]
);
}
}
Although this approach may seem somewhat cumbersome or intricate to me, I am wondering if there is a simpler or more elegant solution available?