Показать карту Недвижимость в Angular 8 - PullRequest
Новая
       4

Показать карту Недвижимость в Angular 8

1 голос
/ 08 апреля 2020

В моем приложении Angular 8 у меня есть сущность Mealplan, у которой в качестве свойства есть карта, ключом которой является перечисление weekday.

Теперь я хочу отобразить карту в моем шаблоне, например, например: 

<li *ngFor="let meal of mealplan.mealsPerWeek">{{meal.weekday}}: {{meal.name}}</li>

для вывода: 

- Monday: Burger
- Tuesday: Fish
etc.

Это решение работает для массива, но не для карты.

foodplan.ts 

export class Mealplan {
  id: number;
  week: number;
  mealsPerWeek: Map<Weekday, Meal>;
 }

food.ts 

export class Meal {
  id: number;
  name: string;
  price: number;
  art: string;
}

weekday.ts 

export enum Weekday {
  Monday, Tuesday, Wednesday, Thursday, Friday
}

JSON из моего REST API выглядит так: 

{
id: 1,
week: 10,
mealsPerWeek: {
  Thursday: {
   id: 5,
   name: "Lasagne",
   price: 4.5,
   art: "with Meat"
   },

1 Ответ

1 голос
/ 08 апреля 2020

Я нашел решение: 

<div *ngFor="let meal of mealplan.mealsPerWeek | keyvalue">
    {{meal.key}}: {{meal.value.name}}
</div>

Вывод: 

Tuesday: Salad
Thursday: Lasagne
Friday: Fish
Wednesday: Burger
Monday: Soup

Редактировать:

Я понял, что KeyValuePipe сортирует строки ключей в алфавитном порядке , Чтобы предотвратить это, вы можете написать | keyvalue : returnZero в шаблоне

, а в машинописном тексте написать простую функцию, которая возвращает 0. 

returnZero(): number {
 return 0;
}
...