管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并显示“内存”对象，以及如何正确地语法？

<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>

该代码没有显示“内存”的数据。我怎么能解决这个问题？

Answer 1

更新，所以我以前没有看到的是，您正在将过滤器应用到"*ngFor“。我只注意到过滤器应用于"< td >“元素。现在事情变得更有意义了。实际上，您不希望对"< td >“元素应用筛选器，这意味着它试图两次转换数据(一次在Array中的每个对象上，然后对对象的属性进行转换)。

现在我对你想做的事情有了更好的了解，我做了一个示例柱塞。这演示了如何在没有管道和管道的情况下实现您想要的目标。

语法看起来很好，除了管道名称与用法不匹配。您可以将管道名称标识为"key“，但当您在html中使用管道时，则将其称为”key“。

但我不能说这会解决整个问题，因为我不知道为什么要在transform方法的Type number上使用"for“属性迭代器。我会将一些数据记录到transform方法中的控制台，以确保它正在运行，并创建您期望的结果。

@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; 
    } 
}