ngForでJsonオブジェクトを反復する

Webサーバーから次のJSONストリングを取得します。そのが働いていない理由を私は見つけることのためにngForでJsonオブジェクトを反復する

[ 
{"name":"Joe Lincoln","age":"42","grade":"9","active":"1"}, 
{"name":"Jack Smith","age":"38","grade":"8","active":"1"}, 
{"name":"Peter Smith","age":"42","grade":"9","active":"0"}, 
{"name":"Eva Lorens","age":"42","grade":"8","active":"1"}, 
]

私はHTMLで公共JSONをしたいが、私は次のことを試してみましたが、フィールドが満たされていない取得、私も例外を取得していないので、その非常に難しいです。

this.servletService.webserviceCall('MemberUnit', 'getMembers', params).then((obs)=>{ 
     obs.subscribe(
      (data) => { 
      this.members = JSON.parse(data); 
      }); 
    })

HTML

<ion-item *ngFor="let member of members"> 
<ion-avatar item-left> 
     <svg width="75px" height="75px" > 
    <text x="50%" y="50%" text-anchor="middle" stroke="#2980b9" stroke-width="2px" dy=".1em">{{member.grade }}</text> 
     </svg> 
     </ion-avatar> 
     <h2>{{member.name}}</h2> 
     <h3>{{member.age}}</h3> 
    </ion-item>

出典

2017-02-16 Sandruna

* "JsonオブジェクトをngForで繰り返す" *そうではありません。まず、JSON（文字列）をオブジェクト（JSONではなく）に解析します。次に、そのオブジェクトのプロパティを繰り返します。 –

タイトルに間違いがあるかもしれませんが、説明がわかりやすいものでなければなりません。 – Sandruna

私は推測に基づいて答えを投稿しましたが、その質問が何であるか、問題が何であるかは完全にはっきりしていないと思います。あなたのコードは '* ngFor 'を配列と一緒に使いますが、あなたはそのオブジェクトについてusimgについて書きます。 –

あなたは

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ name: 'keys' }) 
export class KeysPipe implements PipeTransform { 
    transform(value): any { 
    if(!value) return null; 
    return Object.keys(value); 
    } 
}

01（IE私の知る限りでポリフィルが必要です） Object.keysを使用してオブジェクトからキーを入手することができます

<div *ngFor="let key of member | keys">{{member[key]}}</div>

出典

2017-02-16 15:53:25

私はこの構造を数回見ました。しかし、私はそれをほとんど理解しません。あなたがより具体的になることができるとき、いいだろう。私のJSONオブジェクトはこのパイプでどこに使われていますか？私はそれのための別のクラスを宣言しましたか？はいの場合、特定のクラスでどのように使用できますか？ – Sandruna

Ups、パイプ（ '| keys'）を忘れました。各メンバーは 'transform'に渡され、返されたキーは' * ngFor'によって使用され、次に 'member [key]'によって使用されてキーの値を取得します。 –

それでは、例えば 'member [key] .name'で値を取得しますか？ – Sandruna

ngForでJsonオブジェクトを反復する

答えて

関連する問題