角:如何处理数组中的外键

Question

我有一个meal和mealplan类。每个进餐计划都有一个由五个外键组成的数组，其中引用了就餐对象。

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

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

所有数据都从这样的角度存储在内存中的数据服务中：

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

mealplan.component.ts

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

如果我现在用{{mealplan.mealsPerWeek}}在模板中呈现它，我只会得到数组101,102,103,104,105。

处理is数组以显示类meal属性的最佳方法是什么

结果应该是

MealPerWeek:餐1(价格)，餐2(价格)等。

Answer 1

例如，使用Map而不是Object :迭代和获取餐的值很容易

​

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>

​