Я использую multiple accordion forms на той же странице. Если мы click on Add button , я просто adding one more accordian form in the same page . После отправки второй формы отправляется другой набор данных json. И мой ответ после отправки трех форм выглядит как приведенный ниже массив json.

Ответ JSON ниже:

 [{
  "Key": "S1552115431598",
  "Record": {
    "AdditionalDetails": [{
        "No": "S1552115431598",
        "Circle": "CHE",
        "Src": "UC1"
      },
      {
        "No": "S1552115431598",
        "Circle": "JAR",
        "Src": "UC2"
      },
      {
        "No": "S1552115431598",
        "Circle": "MUM",
        "Src": "UC3"
      }
    ],
    "Category": "Education",
    "Date": "09-03-2019",
    "Desc": "nbhbnbnb",
    "Time": "12:11 PM",
    "No": "S1552115431598"
  }
}]
  

Теперь я хочу заполнить данные массива json соответствующими аккордеонными формами.

HTML

 <mat-step [stepControl]="tapForm">
  <ng-template matStepLabel><span (click)="onNextLoadTAP(res[0]?.Record?.No,res[0]?.Record?.Operator)">FIRST</span>
  </ng-template>
  <button class="acc-btn btn mb-3" *ngIf="FormSubmitted" (click)="onCreateAccr()">New Form <mat-icon>
      playlist_add</mat-icon> </button>
  <mat-accordion>
    <mat-expansion-panel *ngFor="let tform of historyT; 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">
          <mat-form-field class="col-sm-12">
            <input matInput placeholder="Circle">
          </mat-form-field>
          </mat-form-field>
          <mat-form-field class="col-sm-12">
            <input matInput placeholder="source">UCC Portal
          </mat-form-field>
        </div>
      </form>
    </mat-expansion-panel>
  </mat-accordion>
  

Мой ts-файл: onClick из dd button будет вызвана эта функция.

 historyT: any = [];
onCreateAccr() {
this.APIGet();   // My json response will be coming from this function
this.historyT.push(this.historyT.length   1);
}
  

Обычно мы устанавливали значения следующим образом,

this.tapForm.controls[‘circle’].setValue(this.res[i].Запись.Категория);

Но, я изо всех сил пытаюсь установить значения для этих нескольких аккордеонных форм, кто-нибудь, пожалуйста, может мне помочь, как это сделать?

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