angular - 无法获取角度材料可扩展表中的所有键值

Question

我有一个像下面这样的json

[
  { naming: 'Captain America', 
     city:[
      {"status":"inactive","age":30}
      ] 
  },
  { naming: 'Ironman', 
     bio:[
      {"area":"usa","gender":"male"}
      ] 
  }  

];

我正在尝试使用角材料在这里创建一个可扩展面板问题我能够“命名”键，但我无法查看另一个关键细节，我的意思是在第一个对象中我有“城市”作为键和在第二个对象中，我将 bio 作为关键。

在这里，我如何动态呈现这些键中的数据，以便我可以并排显示这些键和值下面是我的代码

<mat-accordion>

    <mat-expansion-panel *ngFor="let value of avengers">
        <mat-expansion-panel-header>
            {{value.naming}}
      
        </mat-expansion-panel-header>
       <ng-container *ngFor="let x of value.city">
            {{x}}
       </ng-container>
    </mat-expansion-panel>
</mat-accordion> 
<hr> 

stackblitz 网址：--> https://stackblitz.com/edit/dynamic-expansion-panel-5ragqy

标签： angularangular-material

Answer 1

首先，您需要创建一个小管道来获取对象的不同键

import { Pipe, PipeTransform} from '@angular/core';

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value)
  }
}

这将完成这项工作，但您需要将其添加到您的app.module.ts中，如下所示

@NgModule({
  imports: [ // your different imports
  ],
  declarations: [ // your declarations
    KeysPipe
  ],
  exports: [ // your exports
    KeysPipe
  ]
})

最后，在您的component.html中，您需要编写这些行

<P>Avengers</P>
<mat-accordion>
  <mat-expansion-panel *ngFor="let value of avengers">
    <mat-expansion-panel-header>
      {{value.naming}}
    </mat-expansion-panel-header>
    <ng-container *ngFor="let key of value | keys">
      <ng-container *ngIf="key != 'naming'">
        <ng-container *ngFor="let key_second of value[key][0] | keys">
          {{value[key][0][key_second]}}
        </ng-container>
      </ng-container>
    </ng-container>
  </mat-expansion-panel>
</mat-accordion> 
<hr>

所以像这样你有这个结果