我正在尝试创建(我认为的)是当前项目的基本调度程序组件。
编辑:我找到了自己的解决方案,答案如下。任何帮助解决选择所有功能的奖励,我暂时搁置了:)
TLDR;
问:为什么如果我传入禁用的行,启用它并开始编辑,该行将被禁用?如果我启用所有行 OnInit,一切将按预期工作。
Editor StackBlitz: Editor StackBlitz for Angular FormArray Table
AppStackBlitz: App Stackblitz for Angular FormArray table
目标是允许用户选择和/或取消选择表单中的特定日期或时间范围。如果选择了该列或该行,则其元素将切换其"活动"状态。
因此,我切换了"星期日"列和"晨行"。只有与星期日和早上时间范围相关的值才会处于活动状态。
我正在使用 *ngIf 或隐藏来对用户隐藏元素,因此他们无法编辑。如果表单输入处于活动状态,则他们可以通过编辑该字段来查看它。
但是,当我使用未活动的行初始化表单时,问题就出现了。因此,我激活了 ngOnInit,然后用户可以在状态初始化后切换行。
启用这些禁用的行并且用户开始编辑时,该行的活动状态将禁用。这就是我感到困惑的地方。我在杂草中,我似乎找不到问题所在。
调试后,我已经解决了我的问题。对于遇到类似用例的任何人,我的解决方案涉及如何处理在切换 FormControl 值时设置活动状态。
以前我通过 Angular 的 getter 函数切换活动值:
[FormControl].value.[ActiveFormField] = !active_state
这没有更新表单的正确值。
相反,我需要这样设置值:
[FormControl].value.[ActiveFormField].setValue(!active_state).
通过设置该值,表单随后正确更新,我的切换状态按预期执行。
我还清理了我引用的嵌套for-loops
;但是,我仍然需要处理全选和取消选择所有状态。