Javascript Angular2-带有数据数组的反应形式

我的组件中有一个表单设置，用户最多可以修改三个轮班容器，包括开始时间、结束时间和一周中的几天

在不必重复一堆代码三次的情况下，我正试图找出实现这一点的最动态的方法

以下是我当前的单班HTML：

<span formGroupName="slice" *ngFor="let slice of [1,2,3]">
   <table class="table table-condensed">
      <thead>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th style="text-align:center;">Enable</th>
      </thead>
      <tbody>
         <tr>
            <td class="col-md-2" style="text-align:center; vertical-align:middle">
               Time Slice {{ slice }}
            </td>
            <td>
               <select name="hour_start" class="form-control input-sm"  formControlName="hour_start">
                  <option value="{{ h }}" *ngFor="let h of hours">{{ h }}</option>
               </select>
            </td>
            <td>
               <select name="minute_start" class="form-control input-sm" formControlName="minute_start">
                  <option value="{{ m }}" *ngFor="let m of minutes">{{ m }}</option>
               </select>
            </td>
            <td>
               <select name="period_start" class="form-control input-sm" formControlName="period_start">
                  <option value="{{ p }}" *ngFor="let p of period">{{ p }}</option>
               </select>
            </td>
            <td style="text-align:center; vertical-align:middle;">-</td>
            <td>
               <select name="hour_end" class="form-control input-sm" formControlName="hour_end">
                  <option value="{{ h }}" *ngFor="let h of hours">{{ h }}</option>
               </select>
            </td>
            <td>
               <select name="minute_end" class="form-control input-sm" formControlName="minute_end">
                  <option value="{{ m }}" *ngFor="let m of minutes">{{ m }}</option>
               </select>
            </td>
            <td>
               <select name="period_end" class="form-control input-sm" formControlName="period_end">
                  <option value="{{ p }}" *ngFor="let p of period">{{ p }}</option>
               </select>
            </td>
            <td style="vertical-align:middle; text-align:center;"><input type="checkbox" (change)="toggleSlice(slice, true)"></td>
         </tr>
         <tr>
            <td class="col-md-2"></td>
            <td colspan="7">
               <table class="table table-condensed" formGroupName="days">
                  <tbody>
                     <tr>
                        <td *ngFor="let d of days">
                           <div class="checkbox">
                              <label>
                              <input type="checkbox" formControlName="day_{{ d }}"> {{ d }}
                              </label>
                           </div>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>
</span>
<!-- Time Slice -->
</span>

关于其他小细节，每个移位行都包含一个启用/禁用复选框，因此如果需要，我可以选择使用其他两个移位容器，否则，它们将被禁用

现在使用jQuery之类的工具，我可以通过获取该复选框的父元素并以这种方式处理每组数据（shift）来实现这一点。不过，我在这里的目标是不需要使用jQuery，并找出反应式表单可以为这种情况提供什么

问题：

如何使用反应式表单将这三个时间片（移位）形成一个更动态的设置，而不是为每个时间片硬编码。反应式表单能否处理此问题？

是的，您可以使用动态添加和删除反应式表单的部分

有一篇很好的博文介绍了这一点，我在下面列出了一些相关的文章

组件

ngOnInit（）{
//我们将在这里初始化表单
this.myForm=this.\u fb.group({
名称：[''，[Validators.required，Validators.minLength（5）]，
地址：此。\u fb.array([
此.initAddress（），
])
});
}
initAddress（）{
//初始化我们的地址
将此返回。\u fb.group({
街道：[''，验证器。必需]，
邮政编码：['']
});
}
addAddress（）{
//将地址添加到列表中
const control=this.myForm.controls['addresses']；
control.push（this.initAddress（））；
}
removeAddress（i:编号）{
//从列表中删除地址
const control=this.myForm.controls['addresses']；
控制。移除（i）；
}

HTML

地址{i+1}
街道
街道是必需的
邮政编码

this.transitionForm = this.fb.group({
            shift: this.fb.group({
                slice: this.fb.group({
                    hour_start: { value: '1', disabled: true },
                    minute_start: { value: '00', disabled: true },
                    period_start: { value: 'AM', disabled: true },
                    hour_end: { value: '1', disabled: true },
                    minute_end: { value: '00', disabled: true },
                    period_end: { value: 'AM', disabled: true },
                    days: this.fb.group({
                        day_Su: { value: '', disabled: true },
                        day_M: { value: '', disabled: true },
                        day_Tu: { value: '', disabled: true },
                        day_W: { value: '', disabled: true },
                        day_Th: { value: '', disabled: true },
                        day_F: { value: '', disabled: true },
                        day_Sa: { value: '', disabled: true }
                    })
                })
            })
        });