创建嵌套的html结构

Question

检查以下链接，我正在尝试

https://stackblitz.com/edit/angular-zrfqxx?file=app%2Faccordian-component.ts

我跟随json

data = {
    a: {
        b: "abc",
        c: [
            {
                d: "pqr",
                e: true
            },
            {
                f: 1,
                e: ["xyz", 1]
            }
        ]
    }
}

现在我试图在角度2

中为上面的json创建一个html结构

1. 如果对象存在则显示手风琴
2. 如果列表中的对象然后以手风琴
显示标签
3. 如果列表存在，则以ul列表显示数据
4. 如果对象中的对象是手风琴中的节目手风琴

我试图这样做

<div class="confirmation-dialog">
  <div class="mdl-grid">
    <button mdl-button mdl-button-type="icon" mat-dialog-close class="mdl-dialog__close">
      <mdl-icon>close</mdl-icon>
    </button>
    <div class="mdl-cell mdl-cell--12-col">
      <div mat-dialog-content>
        <mat-card>
          <mat-card-header>
          </mat-card-header>
          <mat-card-content>
            <mat-accordion>
              <mat-expansion-panel *ngFor="let key of objectKeys(nodes)">
                <mat-expansion-panel-header>
                  <mat-panel-title>
                    {{key}}
                  </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-form-field>
                  <label>b</label>
                  <input matInput placeholder="abc" readonly>
                </mat-form-field>
                <mat-accordion>
                  <mat-expansion-panel *ngFor="let item of objectKeys(nodes[key])">
                    <mat-expansion-panel-header>
                      <mat-panel-title>
                        {{item}}
                      </mat-panel-title>
                    </mat-expansion-panel-header>
                    <mat-form-field>
                      <input matInput placeholder="data">
                    </mat-form-field>
                  </mat-expansion-panel>
                </mat-accordion>
              </mat-expansion-panel>
            </mat-accordion>
          </mat-card-content>
        </mat-card>
      </div>
    </div>
  </div>
</div>

但是我如何在每个

中显示嵌套的手风琴，标签和数据