Как установить значение массива json для нескольких аккордеонных форм в угловых 6?

Question

Я использую 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 [ 'круг'] SetValue (this.res [I] .Record.Category); * * тысяча двадцать-одна

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

Answer 1

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