Question

我试图循环播放内容。我在StackOverflow中尝试了一些答案，但没有一个适用于我。

我有这个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"
   }
}

我正在尝试使用此代码循环

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

它不起作用。我做错了什么？

Answer 1

Angular＆＃39; ng-for要求任何具有Iterable接口的元素都可以工作，而普通对象则不然。你需要＆＃34;转换＆＃34;这个对象在数组中，更简单的方法是使用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来使用密钥推送新对象。

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。

希望这有帮助。

循环对象Ionic3 / Angular4

1 个答案: