Schleife über Objekt Ionic3/Angular4

Question

Ich versuche, einen Inhalt zu durchlaufen. Ich habe versucht, einige Antworten hier in StackOverflow zu finden, aber keine funktioniert für mich.

Ich habe dieses 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" 
    } 
} 

Ich bin eine Schleife mit diesem Code versucht

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

Es funktioniert nicht. Was mache ich falsch?

Answer 1

Angulars ng-for erfordert jedes Element mit Iterable Schnittstelle zu arbeiten, und es ist nicht der Fall für ein einfaches Objekt. Sie müssen sich dieses Objekt in einem Array „konvertieren“, der einfachere Weg ist mit forEach oder eine for/in Schleife:

überall in Ihrem Code, den Sie durch Ihr Objekt iteriert werden und es in einer neuen Variablen speichern, um in ngFor verwendet werden :

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

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

Wenn Sie den Schlüssel verwendet for/in zu drücken, ein neues Objekt mit dem Schlüssel 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 
    }); 
} 

schließlich Ihre HTML

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

Damit können Sie ng-for in Ihrem neuen Array verwenden.

Hoffe, das hilft.