Блог

Я пытаюсь динамически добавить панель вот моя текущая статическая панель, в которой есть некоторые поля. Но в динамической панели изначально это будет пустая панель.

Вот как выглядит мой текущий HTML, когда я нажимаю кнопку добавить, мне нужно добавить одну панель

 <button class="addSection" title="Add Section" (click)="add()"></button>

<form [formGroup]="form" (ngSubmit)="onSubmit()">
<ng-container *ngFor="let group of formData.groups">
    <!-- Panels-->
    <mat-accordion>
        <mat-expansion-panel cdkDrag>
            <mat-expansion-panel-header>
                {{group.formGroupName}}
            </mat-expansion-panel-header>
            <div [formGroupName]="group.formGroupName">
                <div class="row" style="margin-left:20px;">
                    <ng-container *ngFor="let field of group.fields">
                        <!--Field Rows-->
                            Data
                        <!--Fields-->
                    </ng-container>
                </div>
            </div>
        </mat-expansion-panel>
    </mat-accordion>

</ng-container>
 

Вот эталонное изображение, которое я пытаюсь добавить в панель рядом с панелью контактов

Вот код ts

  add() {
this.form.addControl("abc", new FormGroup({}));
this.formData.groups = [...this.formData.groups, {
  formGroupName: "abc",
  fields: []
 }] 
 

};

Но этот код работает не так, как ожидалось, здесь что-то не так

Я думаю, это может быть связано с тем, что вы не изменяете массив неизменяемо. Каждый раз, когда вы изменяете массив или объект, изменяйте его неизменным образом, чтобы при обнаружении изменений было известно, что значение массива изменилось. Чтобы изменить неизменяемо, мы должны изменить адрес массива в памяти.

Попробуй:

 add() {
     console.log("add called");
     this.arr = this.myForm.get('arr') as FormArray;
     this.arr [...this.arr, ...this.createItem()];
     console.log(this.arr);
     // I think concat is immutable (returns a new array) so this should be fine
     this.panels = this.panels.concat(this.panels.length   1);         
   }