javascript - 如何从对象类型中动态获取值并在扩展面板 Angular Material 中实现？

Question

场景 :
使用 JSON 使用 Angular Material 扩展面板动态显示扩展面板名称和内容。
问题 :
我可以动态放置面板名称，但对于内容，我需要检查 JSON，因为我有一个 类型 关键所以基于类型我需要推送特定div的特定功能。
JSON :

[{
          module: "Person Details",
          type: 'table',
          moduleData: [
            {
              "firstName":"MaxRunner",
              "ID":"12345",
            }
          ]
        },
        {
          module: "Current Location",
          type: 'horizontal-stepper',
          CurrentData: [
            {
              "step":1,
              "description":"Philips",
              "status":true
            },
            {
              "step":2,
              "description":"Philips",
              "status":true
            },
            {
              "step":3,
              "description":"Philips",
              "status":false
            }
          ]
        }
      ];

这里基于 类型 键，我正在推 模块数据 div 的关键现在我所做的就像
我手动给出了键名，但假设将来如果我有对象，那么我无法手动设置 div 中的每个名称，那么有什么动态方法可以做到这一点吗？
我做了什么

<div  *ngIf="module.type==='table'">
        <div *ngFor="let moduleKey of getKeys(module.moduleData[0])">
            <div > {{ moduleKey }} </div>
            <div> {{module.moduleData[0][moduleKey]}} </div>
        </div>
    </div>

<div style="border-bottom:0;" *ngIf="module.type==='horizontal-stepper'">   
    <div [ngClass]="'col-xs-3' + getStatusClass(step, index, module.CurrentData)" *ngFor="let step of module.CurrentData; let index = index">
      <div><div class="progress-bar"></div></div>
      <div >{{step.step}}</div>
      <div class="bs-wizard-info text-center" *ngIf="isActive(step.status, index, module.CurrentData)">{{step.description}}</div>
    </div>
    </div>

在当前的代码中，我正在实现一种手动方式，例如给出键名“ module.CurrentData ”
在这里我不想像“ getStatusClass(step, index, module.CurrentData) 那样手动命名
这是我的 stackblitz .

Answer 1

这是更新的(通用)版本:StackBlitz

我通过添加 data 将数据更新为更通用属性而不是不同类型的不同属性名称。

这是现在的数据:

this.data = [{
          module: "Person Details",
          type: 'table',
          data: [
            {
              "firstName":"MaxRunner",
              "ID":"12345",
            }
          ]
        },
        {
          module: "Current Location",
          type: 'horizontal-stepper',
          data: [
            {
              "step":1,
              "description":"Philips",
              "status":true
            },
            {
              "step":2,
              "description":"Philips",
              "status":true
            },
            {
              "step":3,
              "description":"Philips",
              "status":false
            }
          ]
        }
      ];

我已经更新了模板代码，现在你只需要传递数据而不是不同类型的不同名称。

<mat-accordion>
    <mat-expansion-panel *ngFor="let module of data">
        <mat-expansion-panel-header>
            {{module.module}}
        </mat-expansion-panel-header>

        <div  *ngIf="module.type==='table'">
            <div *ngFor="let moduleKey of getKeys(module.data[0])">
                <div > {{ moduleKey }} </div>
                <div> {{module.data[0][moduleKey]}} </div>
            </div>
        </div>

        <div style="border-bottom:0;" *ngIf="module.type==='horizontal-stepper'">   
            <div [ngClass]="'col-xs-3' + getStatusClass(step, index, module.data)" *ngFor="let step of module.data; let index = index">
              <div><div class="progress-bar"></div></div>
              <div >{{step.step}}</div>
              <div class="bs-wizard-info text-center" *ngIf="isActive(step.status, index, module.data)">{{step.description}}</div>
            </div>
        </div>

    </mat-expansion-panel>