如何在 Angular 应用程序中显示内部数组的数据并更新值？答案

【问题标题】：How to display data of an inner array & update values in Angular app?如何在 Angular 应用程序中显示内部数组的数据并更新值？
【发布时间】：2021-01-18 08:06:03
【问题描述】：

我正在尝试创建一个 Angular 应用程序来跟踪我的健身房锻炼情况。

以下数组包含该锻炼中的各种锻炼名称、次数、组数、重量等：

workoutExercises = [
    {
      id: 0,
      name: "Close Grip Bench ",
      setOne: [5, 18.5, false], // repitition, weight, setComplete
      setTwo: [3, 18.5, false],
      setThree: [2, 18.5, false],
      setFour: [8, 18.5, false],
      setFive: [8, 18.5, false],
      currentExercise: true,
    },
    {
      id: 1,
      name: "Barbell Rows",
      setOne: [5, 19, false],
      setTwo: [3, 28.5, false],
      setThree: [2, 38, false],
      setFour: [8, 47.5, false],
      setFive: [8, 47.5, false],
      currentExercise: false,
    },
    {
      id: 2,
      name: "Pull Ups",
      setOne: [6, 0, false],
      setTwo: [6, 0, false],
      currentExercise: false,
    },
  ];

在 UI 上，我希望显示来自第一组 setOne: [5, 18.5, false] 的信息。

然后当用户点击Done时，我想移动到下一组setTwo: [3, 18.5, false]，并显示该信息，等等。

我正在考虑在第一组中添加 currentExercise 布尔值，并在设置完成后更新它，但我相信有更好的方法。

谁能告诉我解决这个问题的最佳方法是什么？

注意：当一个完整的练习完成后，我想进入下一个练习的第一组。

【问题讨论】：

这种数据格式可能不适合您的需要。因为您使用对象，所以您需要对“下一组”进行硬编码才能显示或使用它。将您设置为数组数组或对象数组可能会更好。类似于 {id: 1, sets:[{reps: 5, weight: 8, done: true},{reps: 10, weight:5, done: false}]}。这样一来，只需增加索引就可以更轻松地移动到下一组。
谢谢@MikeOne。我感觉我尝试使用的结构存在问题。我会尝试并实施您上面的建议并相应地更新问题。
@MikeOne 我可以拥有像您在评论中提到的那样的对象数组吗？

标签： arrays angular typescript

【解决方案1】：

您可以做的一个改进数据模型的方法是将您的练习步骤分组到一个称为步骤的数组中：

const workoutExercises = [
  {
    id: 0,
    name: "Close Grip Bench ",
    sets: [
      [5, 18.5], // repitition, weight, setComplete
      [3, 18.5],
      [2, 18.5],
      [8, 18.5],
      [8, 18.5]
    ]
  },
  {
    id: 1,
    name: "Barbell Rows",
    sets: [
      [5, 19],
      [3, 28.5],
      [2, 38],
      [8, 47.5],
      [8, 47.5]
    ]
  },
  {
    id: 2,
    name: "Pull Ups",
    sets: [
      [6, 0],
      [6, 0]
    ]
  }
];

之后，您可以将对象转换为包含多个对象的单个数组，每个对象将单独包含一组及其 id 和名称：

const workouts = workoutExercises.map(e => [...e.sets.map(val => {
  return {name: e.name, id: e.id, set: val}
}
)]).flat()
console.log(workouts)

结果在控制台：
链接到 stackblitz 示例：link

【讨论】：