Angular / Typescript: как вернуть ключ перечисления вместо значения в паре ключ-значение?

Question

У меня есть интерфейсы Meal и Mealplan с данными, поступающими из API. Каждый план питания состоит из пар ключ-значение, где ключи хранятся в enum Weekday. Итак, каждый план питания содержит одну еду для каждого дня недели.

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 };
}

Теперь у меня есть реактивная форма, в которой я хочу отобразить различные блюда из едыPerWeek и вернуться еда и день недели с [ngValue] . Это будет важно для удаления указанного c еды из foodsPerWeek

<select>
  <option *ngFor="let meal of mealplan?.mealsPerWeek | keyvalue: returnZero"
          [ngValue]="{meal: meal.value, weekday: meal.key}"
          [label]="essen.value.name"></option>
</select>

Проблема сейчас заключается в том, что значение день недели теперь строка похожа на «Понедельник». Как вместо этого вернуть значение числа, например, 0 для понедельника? Я ожидал, что что-то вроде meal.key[key] будет работать, но это не так.

console.log(this.form.meal.value.weekday) // "Monday", but expected 0.

Answer 1

Мне кажется, что вы можете просто использовать console.log(Weekday[this.form.meal.value.weekday]) для достижения того, что вы хотите.

Однако я рекомендую всегда использовать перечисления со строками в качестве значений, например:

enum Weekday {
  Monday = "Monday",
  Tuesday = "Tuesday",
  Wednesday = "Wednesday",
  Thursday = "Thursday",
  Friday = "Friday"
}

Answer 2

Я создал пример для stackblitz , который отлично работает

 mealplan: Mealplan = {
    id: 10,
    mealsPerWeek: {
      [Weekday.Monday]: { id: 0, name: 'Monday meal' },
      [Weekday.Tuesday]: { id: 1, name: 'Tuesday meal' },
      [Weekday.Wednesday]: { id: 2, name: 'Wednesday meal' },
      [Weekday.Thursday]: { id: 3, name: 'Thursday meal' },
      [Weekday.Friday]: { id: 4, name: 'Friday meal' },
    }
  };