如何从对象类型中动态获取值并在扩展面板角材料中实现？

Posted 2023-03-13

【中文标题】如何从对象类型中动态获取值并在扩展面板角材料中实现？

【英文标题】：How to dynamically get the values from Object Type and implement in Expansion panel Angular material?

【发布时间】：2020-10-25 21:00:24

【问题描述】：

场景：

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

问题：

我可以动态放置面板名称，但对于内容，我需要检查 JSON，因为我有一个 type 键，因此我需要根据类型推送特定 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)”

这是我的stackblitz。

【问题讨论】：

我没有完全得到你的要求。如果您不想手动命名，那么您应该为此进行一些配置。或者至少是一些映射

@yurzui 现在我提到的名称如下 getStatusClass(step, index, module.CurrentData) 直接提及键名，但我如何以动态方式映射它而不以硬编码方式提及它

您正在做的是将您的模型转换为视图模型（即模板需要正确显示数据的模型）。但是您在模板中执行此操作。有什么理由，您没有在模板之外进行此对话吗？即当您从源获取数据时，对诸如 isActive 之类的东西进行验证。这将大大简化您的 html 并避免 HTML 必须应用业务逻辑。

没有这样做的具体原因是模板@Edward 还有其他方法吗？

【参考方案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>

【参考方案2】：

我不确定这会对您有所帮助。但在 Angular 中，有一种方法可以使用 keyValuePipe 迭代键值对。这样，您无需硬编码即可获得密钥。例如，

<ng-container *ngFor="let module of modules">
  <div *ngFor="let moduleKey of module|keyvalue">
   <!--you can have dynamic key such as moduledata|currentData etc-->
</div>
</ng-container>