User one @Pipe for two treatment

Question

我想创建一个简单的表，带有我的项目的名称，一个将接受"key“配置的列，最后在同一行上与"key”和<th>关联的值​​。

但是我使用@Pipe通过删除重复项来过滤我的键，但是我不知道如何绑定与键关联的值​​。

下面是我的代码，希望我的解释是正确的

config.json：

​

[ { "id": "dev",
    "values": [ { 
      "name": "password",
      "value": "root-default://dev" },
      
      { "name": "env",
        "value": "env-default://dev" },
        
       { "name": "user",
         "value": "toto-default://dev" },
         
       { "name": "element",
          "value": "element-default://dev" } 
        ] },
      
      { "id": "test",
        "values": [ { 
        "name": "password",
        "value": "root-default://test" },
        
       { "name": "env",
         "value": "env-default://test" },
         
       { "name": "user",
         "value": "toto-default://test" },
         
       { "name": "element",
         "value": "element-default://test" } 
        ] },
        
       { "id": "toto",
        "values": [ {
          "name": "password",
          "value": "root-default://toto" },
          
          { "name": "env",
            "value": "env-default://toto" },
            
          { "name": "user",
            "value": "toto-default://toto" },
            
          { "name": "element",
            "value": "element-default://toto" } 
           ] }
 ]

​

我的Html：

​

<ng-container *ngIf="service && config">
  <table style="color: white; background-color: red;">
    <tr>
      <th></th>
      <th *ngFor="let item of service.configs">{{item.name}}</th>
    </tr>

    <ng-container *ngFor="let key of (config | keys); let i = index">
        <tr>
          <td>{{key}}</td>
        </tr>
    </ng-container>
  </table>
</ng-container>

​

我的@管道：

​

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

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
    transform(value: any) {
        let listConf = [];
        let result = [];
        if(! value){
            return result;
        }

        for (let obj in value){
            let item = value[obj];
            if (result.indexOf(item.values) < 0) {
                listConf.push(item.values);
            }
        }

        for (let values in listConf) {
            let value = listConf[values];

            for (let items in value) {
                let item = value[items];
                if (result.indexOf(item.name) < 0) {
                    result.push(item.name);
                }
            }
        }

        return result;
    }
}

​

为了显示服务，我使用了另一个对象“<th>”，它列出了配置的名称

Service.json

​

{ 
  "configs": [ 
      {"name": "dev"},  
      {"name": "test"},
      {"name": "toto"} 
  ]
}

​

我的问题是:如何在同一个@​​中拥有一个键数组和一个值数组​​

我使用以下代码得到的结果：

Result table