【发布时间】：2021-12-09 18:31:20
【问题描述】：
我已经编写了一个时间表，我想在其中选择一周中给定日期的时间范围。另外，我添加了一个复选框，我希望它设置我一整天，取消选中后，我可以自己选择小时范围。请帮忙
【问题讨论】：
标签： angular
【发布时间】：2021-12-09 18:31:20
【问题描述】：
我采用了您的 stackblitz 脚本并对其进行了一些调整，使其具有所需的行为。
我采取的步骤包括：
- 创建了一个 Row 接口以避免使用 any 类型。 Typescript 中的关键点之一。
- 简化了数据结构 -> 现在只有一个而不是两个。
- 更改了单元格点击功能 -> 取消了 active 类切换，现在只使用单元格值。在 HTML 中，如果单元格值为 1，则有一个 ngClass 指令可以切换 active 类。
- 添加了切换整行的功能。
- 修复了标签的 input id 和 label，因此它们在整个数组中不一样，因此如果您按下任何 label ，它只会切换第一行。
我们可以更进一步，从行中删除活动字段，但它确实简化了准备工作。
给你：https://stackblitz.com/edit/angular-ivy-cehxvw?file=src/app/app.component.ts
【讨论】：
-
我该怎么做呢，在点击“保存”按钮后，提取信息，例如周一时间：{from: '00: 00', to: '23: 00'} 或周二 {from: '01:00', to: '03:00'} {from: '11:00', to: '13:00'} etc stackblitz.com/edit/…
-
如果您以不同的方式键入项目会更容易。可能你应该有一个像 Col: { toggled, from, to } 这样的界面。然后，您必须通过切换来遍历所有条目并将它们分组。然后您将打印第一组的 from 和最后一组的 to。
-
我不知道如何创建一个结构来获取这些信息。你会帮我吗？
-
我无法从头开始编写代码。讨论您可能实现的任何目标会更容易。相信我，你会在实践中学到很多东西。
-
嘿，我想了想，我想要我在stackblitz中添加的界面。我添加了一个新字段和一个示例。不过就这些了，能不能告诉我这个效果怎么弄？stackblitz.com/edit/…