管json角2

Question

我使用了一些自定义管道

@Pipe({name: 'keys'}) class KeyPipe implements PipeTransform { 
transform(value, args:string[]) : any { 
      let keys = [];
      console.log(value);
      for (let key in value) { 
          keys.push(key); 
      }
      console.log(keys);
      return keys; 
} 
}

用于解析对象json文件

"system":
         {
              "memory":
              {
                   "total":12425734566,
                   "used":4725959680,
                  "free":8947874816,
                  "actualfree":4221499392,
                 "actualused":452335104,
                 "swaptotal":4296819712,
                 "swapused":0,
                 "swapfree":4296819712
               },
               "uptime":" 12 days,  4:09",
               "loadaverage":"0.00 0.00 0.00",
              "cpu":
              {
                   "vendor":"GenuineIntel",
                   "family":"6",
                   "model":"Intel(R) Xeon(R) CPU           E5620  @ 2.40GHz",
                   "rate":"2399.971",
                   "numofcores":4
               }

如何为此表添加* ngFor并显示＆＃34; memory＆＃34;对象，以及如何正确的语法？

<table>
<thead>
            <tr>
                <th>Общая память</th>
                <th>Общая используемая память</th>
                <th>Свободная память</th>
                <th>Используемая память размера подкачки</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let service_rec of list.system.memory | keys">
                <td>{{ service_rec.total | keys}}</td>
                <td>{{ service_rec.used | keys}}</td>
                <td>{{ service_rec.free | keys}}</td>
                <td>{{ service_rec.actualfree | keys}}</td>
            </tr>
        </tbody>
    </table>

该代码不显示＆＃34; memory＆＃34;的数据。我怎么能解决这个问题？

Answer 1

<强>更新 所以我之前没有看到的是你将过滤器应用于“* ngFor”。我只注意到过滤器应用于“＆lt; td＆gt;”元素。现在事情变得更有意义了。您实际上不想在“＆lt; td＆gt;”上应用过滤器元素，这意味着它试图将数据转换两次（一次在Array中的每个对象上，然后是对象的属性）。

现在我已经更好地了解了你要做的事情，我已经做了example plunker。这展示了如何在没有管道和管道的情况下实现您所需的目标。

语法看起来很好，但管道名称与用法不匹配。您将管道名称标识为“键”，但是当您在html中使用管道时，将其称为“键”。

我不能说这会解决你的整个问题，因为我不确定为什么你在转换方法的类型号上使用“for”属性迭代器。我会在转换方法中将一些数据记录到控制台，以确保它正在运行并创建您期望的结果。

@Pipe({name: 'keys'}) class KeyPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
          let keys = [];
          console.log(value);
          for (let key in value) { 
              keys.push(key); 
          }
          console.log(keys);
          return keys; 
    } 
}