パイプJSON 2

Question

I`m解析オブジェクトのJSONファイルのためのいくつかのカスタムパイプ

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

を使用

"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

UPDATE これまで見ていなかったことは、「* ngFor」にフィルタを適用していることです。私はフィルタが "< td>"要素に適用されていることに気がつきました。今、物事はちょっと意味があります。実際には、 "< td>"要素にフィルタを適用したくないということです。つまり、データを2回変換しようとしています（Array内の各オブジェクトで1回、次にオブジェクトのプロパティで1回）。

私はあなたがしようとしていることのより良いアイデアを得たので、私は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; 
    } 
}