TypeError: this.receivedSummons.map is not a funct

问题:

I am trying to binding dynamic checkboxes on FormArray, when I reproduce on stackblitz its work, but show me error on my IDE, and I am using Array.prototype.map not the rxjs map and I got error in console.log:

core.js:9110 ERROR TypeError: this.receivedSummons.map is not a function

when console.log(this.receivedSummons), I got this,

when console.log(JSON.stringify(this.receivedSummons.data));, I got this, [![console.log(JSON.stringify(this.receivedSummons.data));][2]][2]

this is what I tried:

Ts File

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 File

<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>

this is what I reproduced using stackblitz, I could use some guidance and suggestion on how to solve this.Thanks

回答1:

From the JSON you posted, looks like this.receivedSummons is not an array, .map works over an array, change your code as

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