时间戳

首页 > 解决方案 > Angular：如何处理数组中的外键

arrays - Angular：如何处理数组中的外键

问题描述

我有一堂课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)
  }
}

膳食计划.component.ts

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

如果我现在在模板中渲染它，{{mealplan.mealsPerWeek}}我只会得到 Array 101,102,103,104,105。

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

结果应该是这样的

MealPerWeek：膳食 1（价格）、膳食 2（价格）等。

标签： arraysangularforeign-keysin-memory-databaseangular-observable

解决方案

使用 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>

推荐阅读