用户一@Pipe 进行两次处理答案

【问题标题】：User one @Pipe for two treatment用户一@Pipe 进行两次处理
【发布时间】：2018-05-19 11:10:35
【问题描述】：

我想创建一个简单的表，其中包含我的项目名称，一个将采用“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>

我的@Pipe：

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

我的问题是：如何在同一个@Pipe中有一个key数组和一个value数组

我使用此代码的结果：

Result table

【问题讨论】：

您好@Mattis.h，抱歉，您的要求不明确。你能告诉我们预期的结果是什么吗？（应该在表头中显示什么，等等..）
我添加了一张带有表格结果的图片。我想填写表格的其余部分

标签： html angular pipe ngfor

【解决方案1】：

您可以通过完成在视图中显示数据的方式来实现这一点。

例如：

<table>
        <tr>
           <th></th>
           <ng-container *ngFor="let item of config">
              <th>
                  {{item.id}}
              </th>
           </ng-container>
        </tr>
        <ng-container *ngFor="let key of (config | keys); let i = index">
            <tr>
               <td>{{key}}</td>
               <td>{{config[0].values[i].value}}</td>
               <td>{{config[1].values[i].value}}</td>
               <td>{{config[2].values[i].value}}</td>
            </tr>
         </ng-container>
   </table>

有了这个我得到这个结果：

编辑：此解决方案仅在您尊重生成时列的顺序时才有效，因为我在第二个 ngFor 中对列的索引进行了硬编码

【讨论】：