如何从 Object Type 动态获取值并在 Expansion panel Angular 材质中实现？

Question

场景：

使用 JSON 的 Angular 材料扩展面板动态显示扩展面板名称和内容。

问题：

我能够动态放置面板名称，但对于内容，我需要检查 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
            }
          ]
        }
      ];

这里基于type键，我将moduledata键推送到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) ”那样手动命名

这是我的堆栈闪电战。

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
            }
          ]
        }
      ];

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

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
            }
          ]
        }
      ];