angular - 如何将数据设置和读取到 Angular 反应式嵌套表单？

Question

我正在尝试迭代 HTML trought 两个数组。但不知何故，我无法访问其中的第二个数组。这是数据：

{
    "id": "[e-mail]",
    "businessType": "",
    "phone": "555333",
    "email": "[e-mail]",
    "webSiteUrl": "http://www/",
    "defaultCurrencyIso": "USD",
    "isPublished": "false",
    "publicUrl": null,
    "address": {
        "type": "home",
        "postOfficeBox": "",
        "street": "new broj 3",
        "city": "new york",
        "state": "Somewhere",
        "countryOrRegion": "Somewhere",
        "postalCode": "72000"
    },
    "businessHours": [
        {
            "day": "monday",
            "timeSlots": [
                {
                    "start": "08:00:00.0000000",
                    "end": "11:00:00.0000000"
                },
                {
                    "start": "12:00:00.0000000",
                    "end": "17:00:00.0000000"
                }
            ]
        },
        {
            "day": "tuesday",
            "timeSlots": [
                {
                    "start": "08:00:00.0000000",
                    "end": "17:00:00.0000000"
                }
            ]
        },
        {
            "day": "wednesday",
            "timeSlots": [
                {
                    "start": "08:00:00.0000000",
                    "end": "17:00:00.0000000"
                }
            ]
        },
        {
            "day": "thursday",
            "timeSlots": [
                {
                    "start": "08:00:00.0000000",
                    "end": "17:00:00.0000000"
                }
            ]
        },
        {
            "day": "friday",
            "timeSlots": [
                {
                    "start": "08:00:00.0000000",
                    "end": "17:00:00.0000000"
                }
            ]
        },
        {
            "day": "saturday",
            "timeSlots": []
        },
        {
            "day": "sunday",
            "timeSlots": []
        }
    ],
    "schedulingPolicy": {
        "timeSlotInterval": "PT30M",
        "minimumLeadTime": "P1D",
        "maximumAdvance": "P365D",
        "sendConfirmationsToOwner": true,
        "allowStaffSelection": true
    },
    "displayName": "bank loan deal"
}

我正在尝试进入businessHours，然后进入timeSlots。

显示天数

使用此代码

<div formArrayName="businessHours">
    <div *ngFor="let businessDays of booking.get('businessHours')['controls'];let i = index;" [formGroupName]="i">
        <input type="text" formControlName="day" class="clr-input" readonly>
        <ng-container formArrayName="timeSlots">
            <div *ngFor="let time of businessDays;let j = index;" [formGroupName]="j">
                {{j+1}}
                <input class="clr-input" type="text" formControlName="start">
                <input class="clr-input" type="text" formControlName="end">
            </div>
        </ng-container>
        <clr-icon shape="plus"></clr-icon>
    </div>
</div>

此外，当我添加到第二个 ngFor 时，就像第一个一样，只有 timeSlots 我得到一个错误，它的未定义控制。而且我还收到错误消息：

找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

此外，当我按下此表单上的提交按钮时，我会保存此数据，但我无法在前面显示它。

这就是我创建表单的方式

  createForm(): void {
    this.booking = this.formBuilder.group({
      id: [''],
      businessType: [''],
      phone: [''],
      email: [''],
      webSiteUrl: [''],
      defaultCurrencyIso: [''],
      publicUrl: [''],
      type: [],
      city: [''],
      street: [''],
      countryOrRegion: [''],
      state: [''],
      postalCode: [''],
      businessHours: this.formBuilder.array([]),
      timeSlotInterval: [''],
      minimumLeadTime: [''],
      maximumAdvance: [''],
      sendConfirmationsToOwner: true,
      allowStaffSelection: true,
      displayName: [''],
      isPublished: []
    });
  }

标签： angulartypescriptangular-reactive-forms