2016-07-14 20 views
0

I`m einige Rohre benutzerdefinierten verwendenRohr json Winkel 2

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

für Parse-Objekt JSON-Datei

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

Wie fügt * ngFor für diese Tabelle und zeigt die "Speicher" Objekte und wie syntax richtig?

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

Dieser Code zeigt nicht die Daten von "Speicher". Wie kann ich dieses Problem lösen?

Antwort

1

UPDATE Also etwas, was ich vorher nicht gesehen habe, ist, dass Sie den Filter auf die "* ngFor" anwenden. Ich hatte nur bemerkt, dass die Filter auf die Elemente "< td>" angewendet wurden. Jetzt sind die Dinge ein wenig sinnvoller. Sie möchten den Filter nicht auf die Elemente "< td>" anwenden, dh er versucht, die Daten zweimal zu transformieren (einmal für jedes Objekt im Array und dann für die Eigenschaften des Objekts).

Nun, da ich eine bessere Vorstellung davon habe, was Sie versuchen zu tun, habe ich eine example plunker gemacht. Dies zeigt, wie Sie ohne Rohr und Rohr das erreichen können, wonach Sie suchen.


Die Syntax sieht gut aus mit Ausnahme des Pipe-Namens, der nicht mit der Verwendung übereinstimmt. Sie identifizieren den Pipes-Namen als "Schlüssel", aber wenn Sie die Pipe in Ihrem HTML verwenden, nennen Sie es "Schlüssel".

Ich kann nicht sagen, dass das Ihr gesamtes Problem beheben würde, da ich nicht sicher bin, warum Sie einen "for" -Eigenschaft-Iterator für die Type-Nummer in Ihrer Transformationsmethode verwenden. Ich würde einige Daten in der Umwandlungsmethode in der Konsole protokollieren, um sicherzustellen, dass sie ausgeführt wird und das erwartete Ergebnis erstellt.

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

Ive erhielt dieses Protokoll -> 'Objekt {total: 8256172032, gebraucht: 4889501696, freie: 3366670336, actualfree: 5602824192, actualused: 2653347840 ...} actualfree: 5602824192actualused: 2653347840free: 3366670336swapfree: 14750576640swaptotal: 14780719104swapused: 30142464total: 8256172032Ended: 4889501696__proto__: Objekt monitoring.form.component.ts: 25 ["total", "gebraucht", "frei", "actualfree", "actualed", "swaptotal", "swapused", "swapfree"] Überwachung .form.component.ts: 21 undefined monitoring.form.component.ts: 25 [] monitoring.form.component.ts: 21 undefined', und Daten werden in Tabelle –

+0

nicht angezeigt whats wrong ???? –

+0

Können Sie Ihren ursprünglichen Code bearbeiten und aktualisieren, um anzuzeigen, wo Sie die console.log() Zeilen platziert haben? Geben Sie außerdem an, was Sie mit dem Code "for (let key in value)" erreichen möchten. Es macht wirklich keinen Sinn, eine "for" -Schleife über die Type-Nummer zu legen. –