黑马健康APP实现

数据模型

首页具有的数据模型有：饮食统计信息数据模型、饮食记录分组数据模型、饮食记录本身数据模型、食物及运动（记录项）数据模型。

以记录项模型为例，记录的内容分为两种：饮食和运动。所以先定义记录项的类型，再完成记录项模型。

基于模型提供真实的数据和查询的接口。完成ItemModel和ItemCategoryModel。

ItemModel中需要两个接口，分别用于查询出全部食物或运动和查询出对应分类的食物或运动。且两种接口都要先判断要查询的是食物还是运动。

class ItemModel{

//查所有食物，先判断是不是食物
  list(isFood: boolean = true): RecordItem[]{
    return isFood ? foods : workouts
  }

  listItemGroupByCategory(isFood: boolean = true){
    // 判断要处理的是食物还是运动
    let categories = isFood ? FoodCategories : WorkoutCategories
    let items = isFood ? foods: workouts
    // 创建空的分组,map处理：遍历数组将其变为另一个数组，遍历食物或运动数值，
    let groups = categories.map(itemCategory => new GroupInfo(itemCategory, []))
    // 遍历记录项列表，将食物添加到对应的分组
    items.forEach(item => groups[item.categoryId].items.push(item))
    // 返回结果
    return groups
  }
}

要成功运行两种接口还要改变ItemList组件中的代码，将原先写死的数据改为数据模型中的数据。注意，因为食物和运动两种记录中的分类数量不同，所以导航条部分应该是动态的，可以用ForEach循环渲染完成。