Блог

Я создал таблицу FormArray, и теперь я пытаюсь отобразить только 4 строки в 4 столбцах, потому что у меня есть массив, содержащий только 4 области, поэтому я создал комбинации region друг с другом region и с самим собой, используя вложенный цикл со сложностью O (n) ^ 2, который дал мне 16 комбинацийи при инициализации formarray все поля ввода отображаются в первом столбце, чего не должно быть. Мне нужно показать только 4 в каждом столбце. Я использую материал Angular, так как я могу этого добиться? Вот мой HTML-код

 <div *ngIf="enableCombinationDirective">
  <div fxLayout="row">
      <div class="h1">Add Prices</div>
      <div [formGroup]="combinationForm">
        <div formArrayName="dest" *ngFor="let item of combinationForm.get('dest')['controls']; let i = index">
          <div fxLayout="row" class="check" fxLayoutAlign="space-evenly">
            <mat-form-field appearance="outline" [formGroupName]="i" style="width: 20% !important;" apprearance="outline" fxFlex="50">
              <mat-label>{{
                combinationForm
                    .get("dest")
                    ["controls"][i].get("combinationTitle").value
            }}</mat-label>
            <input
                          matInput
                          type="number"
                          #destInput
                          formControlName="price"
                          placeholder="Enter Price"
                      />
                      <mat-checkbox
                      formControlName="isActive"
                      matSuffix
                  ></mat-checkbox>
            </mat-form-field>
          </div>
        </div>
        <div fxLayout="row">
          <button
              fxFlex="100"
              mat-raised-button
              color="primary"
              (click)="save()"
          >
              Save Changes
          </button>
      </div>
    </div>
  </div>
</div>
  

Форма работает нормально, и я тоже могу извлекать из нее данные. вот как это выглядит

вот как я его инициализирую

  createCombinations() {
    let arrayOfData = [];
    arrayOfData.push({
      volumeSlabType: this.combinationSelectionForm.value.volumeSlab, 
      serviceType: this.combinationSelectionForm.value.serviceType,
      weightSlab: this.combinationSelectionForm.value.weightSlab,
      region: this.getRegionsCombinations(this.combinationSelectionForm.value.region)
    });

    this.data = arrayOfData;
    this.data[0].region.forEach((reg, i) => {
      const fArray = this.combinationForm.get("dest") as FormArray;
      fArray.push(this.createForm(reg, i));
    });
    console.log(this.data);
  }

  createForm(dest: any, index): FormGroup {
    let group: FormGroup;

    if(this.data) {
      group = this._fb.group({
        combinationTitle: [dest.combinationTitle],
        regionId: [dest.regionId],
        price: [],
        isActive: [false],
      });
    }
    return group;
  }

  getFormData(data): FormGroup {
    return data[0].region;
  }

  getRegionsCombinations(region) {
    let selectedRegion: IRegion[] = this.regions.filter((data) => data.id === region);
    let regionCombination = [];
    this.regions.forEach((region) => {
      this.regions.forEach((rData) => {
        regionCombination.push({
          combinationTitle: `${region.name} - ${rData.name}`,
          regionId: rData.id,
          price: 0
        });
      });
    });
    return regionCombination;
  }