TypeError：this.receivedSummons.map 不是 Angular 函数

Question

我正在尝试在FormArray 上绑定动态checkboxes，当我在stackblitz 上重现它的工作时，但在我的IDE 上显示错误，我使用的是Array.prototype.map 而不是rxjs map，我得到了console.log 中的错误：

core.js:9110 ERROR TypeError: this.receivedSummons.map 不是函数

当console.log(this.receivedSummons)，我得到了这个，

当console.log(JSON.stringify(this.receivedSummons.data));，我得到了这个， [![console.log(JSON.stringify(this.receivedSummons.data));][2]][2]

这是我尝试过的：

Ts 文件

receivedSummons: SummonModel[];
  selectedSummons: string;
  checkboxForm: FormGroup;

  get formReceivedSummons() {
    return this.checkboxForm.get('receivedSummons') as FormArray;
  }

  formReceivedSummonsItems(i: number) {
    return (this.formReceivedSummons.controls[i].get('items')) as FormArray;
  }

  constructor(
    private inquiryStore: InquiryStoreService,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.checkboxForm = this.formBuilder.group({
      receivedSummons: this.formBuilder.array([])
    });
    this.getReceivedSummons();
  }

  getReceivedSummons() {
    this.inquiryStore.summons$.subscribe(receivedSummons => {
      this.receivedSummons = receivedSummons;
      this.addCheckboxes();
    });
  }

  addCheckboxes() {
    this.formReceivedSummons.setValue([]);
    this.receivedSummons.map(checkbox => {
      const group = this.formBuilder.group({
        header: [checkbox.header.transactionId],
        items: this.formBuilder.array([], [minSelectedCheckboxes(1)])
      });
      checkbox.data.items.map(items => {
        (group.get('items') as FormArray).push(this.formBuilder.group({
          name: [items.itemNo],
          isChecked: ['']
        }));
      });
      this.formReceivedSummons.push(group);
    });
  }

  submitSelectedCheckboxes() {
    console.log(this.checkboxForm.value);
  }
}

function minSelectedCheckboxes(min = 1) {
  const validator: ValidatorFn = (formArray: FormArray) => {
    const totalSelected = formArray.controls
      .map(control => control.value)
      .reduce((prev, next) => (next ? prev + next : prev), 0);

    return totalSelected >= min ? null : { required: true };
  };
  return validator;
}

HTML 文件

<form [formGroup]="checkboxForm" (ngSubmit)="submitSelectedCheckboxes()">
    <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
        <ng-container [formGroup]="summon">
            <p>{{summon.value.header}}</p>
            <ng-container formArrayName="items"
                *ngFor="let item of formReceivedSummonsItems(i).controls; let j = index">
                <ng-container [formGroup]="item">
                    <input type="checkbox" formControlName="isChecked"> {{item.value.name}}
                </ng-container>
            </ng-container>
        </ng-container>
        <div *ngIf="!summon.valid">At least one order must be selected</div>
    </ng-container>
    <br>
    <button [disabled]="!checkboxForm.valid">submit</button>
</form>

这是我使用stackblitz 复制的内容，我可以就如何解决这个问题提供一些指导和建议。谢谢

Answer 1

从您发布的 JSON 看来，this.receivedSummons 不是一个数组，.map 在一个数组上工作，将您的代码更改为

this.receivedSummons.data.items.map(checkbox =