Angular: как обрабатывать внешние ключи в массивах

Question

У меня есть класс meal и mealplan. Каждый план питания имеет массив из пяти внешних ключей, относящихся к объектам питания.

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

export class Mealplan {
  id: number;
  mealsPerWeek: Meals[] = new Array(5);
}

все данные хранятся в службе данных в памяти из Angular следующим образом:

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const meals = [
      {
        id: 101,
        name: 'Meal 1',
        price: 18.00,
      },
      {
        id: 102,
        name: 'Meal 2',
        price: 20.00,
      },
    ]; 
    const mensaplan = [
      {id: 1, mealsPerWeek: [101, 102, 103, 104, 105]},
      {id: 2, mealsPerWeek: [105, 104, 103, 102, 101]}
    ];

return {meal, mealplan};

Mensaplan.service.ts:

export class MealPlanService {

  private mealplanUrl = 'api/meaplan';

  constructor(private http: HttpClient) {
  }

  getMealplan(): Observable<Mealplan[]> {
    return this.http.get<Mealplan[]>(this.mealplanUrl)
  }
}

foodplan.component.ts

 getMealplan(): void {
   this.mealplanService.getMealplan()
     .subscribe(mealplan => this.mealplan = mealplan);
 }
}

Если я отобразлю его сейчас в шаблон с {{mealplan.mealsPerWeek}} Я получаю только массив 101,102,103,104,105.

Каков наилучший способ обработки массива идентификаторов для отображения свойств класса meal

Результат должно быть что-то вроде

MealPerWeek: Еда 1 (Цена), Еда 2 (Цена), et c.

Answer 1

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

const meals =  new Map([
  [101, {name:'Meal 1',price:18.00}],
  [102, {name:'Meal 2',price:20.00}],
  [103, {name:'Meal 3',price:17.00}],
  [104, {name:'Meal 4',price:22.00}],
  [105, {name:'Meal 5',price:17.00}],
  [106, {name:'Meal 6',price:29.00}],
]);
    const mensaplan = [
      {id: 1, mealsPerWeek: [101, 102, 103, 104, 105]},
      {id: 2, mealsPerWeek: [105, 104, 103, 102, 101]}
    ];


function greeter(plan) {
let val = "";
for(let i=0;i<plan.length;i++){
const name = meals.get(plan[i].mealsPerWeek[0]).name;
const price = meals.get(plan[i].mealsPerWeek[0]).price;
val +='Meal ID '+plan[i].id+'meals name '+name+' price '+price+'<br>';
}
 return val;
}


document.querySelector("#app").innerHTML = greeter(mensaplan);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

<div id="app"></div>