In my project, I have defined the interfaces Meal and Mealplan to handle data retrieved from an api. Every Mealplan includes key-value pairs, where each key corresponds to a day of the week and is stored in the enum Weekday. Therefore, each Mealplan contains a Meal for each day of the week.
export interface Meal {
id: number;
name: string;
}
export enum Weekday {
Monday = 0,
Tuesday = 1,
Wednesday = 2,
Thursday = 3,
Friday = 4
}
export interface Mealplan {
id: number;
mealsPerWeek: { [key in Weekday]: Meal };
}
Now, I am working on a reactive form where I need to display the different meals from mealsPerWeek and pass the meal along with the numeric value of the weekday using [ngValue]. This information is crucial for deleting a specific meal from mealsPerWeek
<select>
<option *ngFor="let meal of mealplan?.mealsPerWeek | keyvalue: returnZero"
[ngValue]="{meal: meal.value, weekday: meal.key}"
[label]="essen.value.name"></option>
</select>
The issue I'm facing is that the value of weekday is currently displayed as a String like "Monday". I need it to be returned as a numeric value such as 0 for Monday instead. I tried using something like meal.key[key], but it didn't work as expected.
console.log(this.form.meal.value.weekday) // "Monday", whereas I expected 0.