ngFor

Question

を持つオブジェクトを印刷

私が引っ張っています対象：

オブジェクトの内容は、我々はデシベルから来るものを知らないので、異なる場合があります（私はそれがあまりにもレモンかもしれない意味）

。

私は私がそれが好きで印刷することができ、アレイにこのオブジェクトを変換ngfor.Ifを使用して、これを印刷しようとしています：

this.drops = Object.values(monster[this.randommnumber].drops); 

<li *ngFor="let drop of drops"> 
    {{ drop }} 
</li> 

これは 3を印刷しますリンゴとピクシを含まない5人。

私は何をしようとしていることは自分の名前でそれらを印刷している。（私はリンゴの意味：3、PIXI：5）

私は行うことができますオブジェクトを配列に変換し、ちょうど

<li *ngFor="let drop of drops"> 
     Apple:{{ drop.apple }} 
     Pixi:{{drop.pixi}} 
    </li> 

を記述することなく

しかし、データがリンゴではなくレモンを持っている場合はどうすればいいですか？あなたはそれを使用し、その後、HTMLテンプレートに直接

public getKeys(obj: string[]): any { 
     return Object.keys(obj); 
} 

をObject.keysを使用することはできませんとしてプロパティ名を返すようにメソッドを書くObject.keys()

を使用する必要が

おかげ

Answer 1

そのようにオブジェクトを反復処理します。

<ul *ngFor="let key of getKeys(obj)"> 
    <li> {{key}}: {{obj[key]}} </li> 
</ul> 

Demo

それとも、あなたはまた、ハッキングの一種である以下、（推奨されません）

_obj: any = Object; 
myObj = { 
    apples: 2, 
    oranges: 3 
} 

し、HTMLで、

<li *ngFor="let key of _obj.keys(y)"> 
    {{ key }} : {{ myObj[key] }} 
</li> 

Demo

Answer 2

それはだ行うことができますかなり単純で、キー値のペアとしてマップするだけです。

Component({ 
    selector: "app-root", 
    template: ` 
    <li *ngFor="let drop of drops"> 
    {{ drop.key }} : {{drop.value}} 
</li> 
    `, 
    styles: [] 
}) 
export class AppComponent { 
    drops: any; 
    _drops = { 
    apples: 5, 
    pixies: 6, 
    lemons: 7 
    }; 

    constructor() { 
    this.drops = Object.keys(this._drops).map(x => { return { key: x, value : this._drops[x] } }); 

    } 
} 

また、より洗練されたソリューションを見つけようとします。私はあなたがそれに余分なフィールドを使わずに作ることができると確信しています。