ループオーバーオブジェクトIonic3/Angular4

Question

コンテンツをループしています。私はStackOverflowでここで見つかったいくつかの回答を試みたが、私のために働くものはありません。

私はそれが動作していない、このコード

<button ion-item *ngFor="let cat of subcategories" (click)="onSubcategorySelect(cat)"> 
       {{ cat.name }} 
</button> 

を使用してループにしようと、このJSON

{ 
    "-KmdNgomUUnfV8fkzne_":{ 
     "name":"Abastecimento" 
    }, 
    "-KmdNgzguGKbCEfyQ3F0":{ 
     "name":"Consórcios" 
    }, 
    "-KmdNh9_jtBlFqY1Y_Rj":{ 
     "name":"Consultoria aeronáutica" 
    }, 
    "-KmdNhKNCVEiJ2Ou8bUV":{ 
     "name":"Cursos e treinamentos" 
    }, 
    "-KmdNhVRoKfaCM--304M":{ 
     "name":"Financiamento" 
    }, 
    "-KmdNhfIC6fA0kDJcVBq":{ 
     "name":"Hangaragem" 
    }, 
    "-KmdNhu0X-PteQMyHp_n":{ 
     "name":"Mecânica" 
    }, 
    "-KmdNi6ZmmYXnoOTXoC5":{ 
     "name":"Táxi Aéreo" 
    }, 
    "-KmdNiHFhiX_crXB1L2R":{ 
     "name":"Outros" 
    } 
} 

に - 私を持っています。私は間違って何をしていますか？

Answer 1

角度のng-forは、Iterableインターフェイスが動作する任意の要素が必要です。プレーンオブジェクトの場合はそうではありません。あなたはもっと簡単な方法がforEachまたはfor/inループであり、配列内のこのオブジェクトを「変換」する必要があります：あなたは、あなたのオブジェクトを反復処理し、ngForで使用される新しい変数に保存しますあなたのコード内の

どこでも：

public newSubcategories: any[] = []; // DECLARE A NEW EMPTY ARRAY IN THE TOP OF YOUR CLASS 

this.subcategories.forEach(item => { 
    this.newSubcategories.push(a); 
}); 

キーで新しいオブジェクトをプッシュするキーを使用for/inをmantainする必要がある場合。

public newSubcategories: any[] = []; // DECLARE A NEW EMPTY ARRAY IN THE TOP OF YOUR CLASS 

for(let key in this.subcategories){ 
    this.newSubcategories.push({ 
    key: key, 
    name: this.subcategories[key].name 
    }); 
} 

最後に、あなたのHTML

<button ion-item *ngFor="let cat of newSubcategories" (click)="onSubcategorySelect(cat)"> 
    {{ cat.name }} 
</button> 

これで、あなたの新しい配列にng-forを使用することができます。

これが役に立ちます。