如何将json数组值设置为角度6的多个手风琴形式？

Question

我在同一页面上使用multiple accordion forms。如果我们click on Add button，我只是adding one more accordian form in the same page。提交第二个表单后，将提交另一组json数据。提交三个表单后我的响应看起来像下面的json数组。

JSON response below:

[{
  "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文件：aonClick的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推送到列表，因为在添加或修改任何对象时，您必须更改列表。