循环通过角材料扩展面板

Question

我已经创建了Angular Material Expansion Panel，但是我想使用* ngFor循环动态创建扩展面板，其中数据来自JSON格式，并且我正在尝试将该数据绑定到扩展面板。为此，我创建了类似这样的代码。见下文：

<mat-accordion>
        <mat-expansion-panel *ngFor="let autocodeRes of autocodeConfig">{{autocodeRes}}
              <mat-expansion-panel-header>
                <mat-panel-title>
                  Type : anonymous_invalid
                </mat-panel-title>
              </mat-expansion-panel-header>

              <mat-form-field>
                <textarea matInput placeholder="Assertions"></textarea>
              </mat-form-field>
                   <br/>
                   <label>Severity</label>
             <mat-radio-group class="example-radio-group" [(ngModel)]="severityGroup">
            <mat-radio-button color="primary" class="example-radio-button" *ngFor="let sev of severity" [value]="sev">
              {{sev}}
            </mat-radio-button>
          </mat-radio-group>
          <br/>
          <mat-checkbox type="checkbox" color="primary" name="size" (change)="0" check>Active</mat-checkbox>
            </mat-expansion-panel>
<mat-accordion>

我创建的服务如下：

private autocodeURL = './assets/auto-code.json';
//Auto-code for testing from static json file
getAutoCodeConfig(){
    return this.http.get(this.autocodeURL);
}

我正在使用该服务的组件如下：

listAutoCode() {
    this.handler.activateLoader();
    this.projectService.getAutoCodeConfig().subscribe(results => {
      console.log(results);
      this.handler.hideLoader();
      if (this.handler.handle(results)) {
        return;
      }
      this.autocodeConfig = results['data'];
      //this.length = results['totalElements'];
    }, error => {
      this.handler.hideLoader();
      this.handler.error(error);
    });
  }

JSON如下所示。

{
   "generators": [
      {
         "type": "anonymous_invalid",
         "assertions": [
            "@StatusCode != 200"
         ],
         "severity": "Critical"
      },
      {
         "type": "auth_invalid",
         "assertions": [
            "@StatusCode != 200"
         ],
         "severity": "Critical"
      },
      {
         "type": "DDOS",
         "assertions": [
            "@StatusCode != 200"
         ],
         "severity": "Critical",
         "matches": [
            {
               "name": "itemsPerPage"
            }
         ]
      },
      {
         "type": "XSS_Injection",
         "assertions": [
            "@StatusCode != 200"
         ],
         "severity": "Critical"
      },
      {
         "type": "sql_injection",
         "assertions": [
            "@StatusCode != 200"
         ],
         "severity": "Critical",
         "database":
            {
               "name": "MySQL",
               "version": 5.7
            }
      },
      {
         "type": "sql_injection_timebound",
         "assertions": [
            "@ResponseTime >= 5000"
         ],
         "severity": "Critical",
         "matches":
            {
               "pathPatterns": "/api/**",
               "methods": null,
               "sample": "account-create, account-update, ...",
               "queryParams": "name,accessKey,...",
               "bodyProperties": "name, key,..."
            },
         "database":
         {
            "name": "MySQL",
            "version": 5.7
         }
      },
      {
         "type": "log_forging",
         "postfix": "log_forging",
         "patterns": [
            "pattern1",
            "pattern2"
         ],
         "assertions": [
            "@StatusCode != 200"
         ],
         "severity": "Critical"
      },
      {
         "type": "rbac",
         "assertions": [
            "@StatusCode == 403"
         ],
         "severity": "Critical",
         "matches": [
            {
               "pathPatterns": "/api/**",
               "methods": null,
               "denyRoles": "Anonymous"
            }
         ]
      },
      {
         "type": "invalid_datatype",
         "assertions": [
            "@StatusCode != 200"
         ],
         "severity": "Major"
      },
      {
         "type": "special_chars",
         "assertions": [
            "@StatusCode != 200"
         ],
         "severity": "Minor"
      },
      {
         "type": "negative_number",
         "assertions": [
            "@StatusCode != 200"
         ],
         "severity": "Minor"
      },
      {
         "type": "null_value",
         "assertions": [
            "@StatusCode != 200"
         ],
         "severity": "Minor"
      },
      {
         "type": "empty_value",
         "assertions": [
            "@StatusCode != 200"
         ],
         "severity": "Minor",
         "inactive": null
      },
      {
         "type": "create",
         "assertions": [
            "@StatusCode == 200"
         ],
         "severity": null,
         "inactive": true
      }
   ]
}

请参见下图，以获得更好的清晰度。

我想使用此json数据并将此数据绑定到“扩展”面板，该面板应循环并向其附加所有json数据。我尝试了上面的代码，但对我不起作用。有人可以建议我吗？

谢谢。