Как заполнить массив значений в нескольких аккордеонных формах на одной HTML-странице?

Question

Я пытаюсь заполнить значения, которые я получаю из бэкэнда, в несколько аккордеонных форм на одной HTML-странице.После того как я снова отправлю форму и вернусь на ту же страницу, в форме будет создана другая кнопка (кнопка новой формы).

При нажатии этой кнопки новой формы должна появиться старая форма, как показано на рисунке, вместе с новой пустой формой.Мы можем создавать формы аккордеона, но мы застряли на том, как заполнить данные бэкэнда на этих HTML-страницах.Пожалуйста, найдите мой код ниже

Наш код:

   <mat-step [stepControl]="OneForm">
            <ng-template matStepLabel><span (click)="onNextLoad()">ONE</span></ng-template>
            <button class="acc-btn btn mb-3" (click)="onCreateAccr()">New Form <mat-icon>playlist_add</mat-icon> </button>
            <mat-accordion>
                <mat-expansion-panel *ngFor="let tform of oneTAP; let i = index">
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            Additional Information {{ i+1 }}
                        </mat-panel-title>
                        <mat-panel-description>
                            Sample Description {{ i+1 }}
                        </mat-panel-description>
                    </mat-expansion-panel-header>
                    <mat-divider></mat-divider>
                    <form>
                        <div class="row mt-3">
                            <div class="col-sm-6">
                                <div class="radio-group">
                                    <span class="col-sm-6"> Registered telemarketer  </span>
                                    <mat-radio-group color="primary" class="col-sm-6">
                                        <mat-radio-button color="primary" value="Registration Number">Yes</mat-radio-button>
                                        <mat-radio-button color="primary" value="Non Number">No</mat-radio-button>
                                    </mat-radio-group>
                                </div>
                                <mat-form-field class="col-sm-12">
                                    <input matInput placeholder="{{ Name }}">
                       </mat-form-field>
                   </mat-step>

Мой тс:

onCreateAccr() {
this.APIGetComp();
this.oneTAP.push(this.oneTAP.length+1);
this.oneTAP.push(this.compData); 
this.OneForm.reset();
this.FormSubmitted = false;
}

compData - это значения, которые я получаю из API-интерфейса вызова.Так что мне нужно нажать значения и отобразить его в передней части (старые формы), которая будет внутри в дополнительной информации, как показано на рисунке.Я новичок в этих аккордеонных формах.Пожалуйста, помогите мне, как это сделать?