Question

我从REST API获取数据，并且我收到一个具有以下格式的JSON：

[Object]
 0:Object
  createdAt:"2016-05-04T16:32"
 list:Array[4]
    0:"Mango"
    1:"Apple"
    2:"Banana"
    3:"Kiwi"

目前，在HTML文件中调用该JSON时会打印以下内容：

芒果，苹果，香蕉，猕猴桃

以下是用于从REST API检索数据的JS代码：

this.http.get('https://example.com/api').subscribe(data => {
    this.categories = data.json().results;
    });

当前的HTML / Angular代码：

  <div *ngFor="#fruit of categories">
   <ion-row>
    <ion-col>
     <div class="txt">{{fruit.list}}</div>
    </ion-col>
    </ion-row>
  </div>

我想要实现的最终结果如下：

 <div>

   <ion-row>
   <ion-col>
     <div class="txt">Mango</div>
   </ion-col>
   <ion-col>
     <div class="txt">Apple</div>
   </ion-col>
   </ion-row>

   <ion-row>
   <ion-col>
     <div class="txt">Banana</div>
   </ion-col>
   <ion-col>
     <div class="txt">Kiwi</div>
   </ion-col>
   </ion-row>

   </div>

你能告诉我如何实现这个目标吗？我是否需要更改JSON本身的内容？或者只需调整* ngFor？

就可以完成

Answer 1

我会创建一个新对象来收集元素：

this.service.getFruits().subscribe(categories => {
  let fruits = categories.list;
  let fruitsByGroup = [];
  fruits.forEach((fruit, index) => {
    let groupIndex = Math.floor(index/2);
    if (index%2 === 0) {
      fruitsByGroup[groupIndex] = [];
    }
    fruitsByGroup[groupIndex].push(fruit);
  });

  this.fruitsByGroup = fruitsByGroup;
});

然后我会这样迭代：

<div *ngFor="#fruitGroup of fruitsByGroup">
  <ion-row *ngFor="#fruit of fruitGroup">
    <ion-col>
     <div class="txt">{{fruit.list}}</div>
    </ion-col>
  </ion-row>
</div>

Answer 2

您可以使用ng-repeat执行类似的操作：

     <div>
       <ion-row ng-repeat="fruit in categories.list">
           <ion-col>
             <div class="txt">{{fruit}}</div>
           </ion-col>
       </ion-row>
    </div>

将出现的主要复杂因素是将它们分成不同的行。如果您处理的项目太多，您可以尝试这样的事情：

     <div>
       <ion-row ng-repeat="fruit in categories.list.slice(0,1)">
           <ion-col>
             <div class="txt">{{fruit}}</div>
           </ion-col>
       </ion-row>
       <ion-row ng-repeat="fruit in categories.list.slice(2,3)">
           <ion-col>
             <div class="txt">{{fruit}}</div>
           </ion-col>
       </ion-row>
    </div>

这会回答你的问题吗？

Answer 3

您可以使用嵌套的ngFor

执行此操作

<div *ngFor="#fruit of categories">
  <ion-row>
    <ion-col *ngFor="#item of fruit.list"> 
      <div class="txt">
         {{item}} 
      </div>
   </ion-col> 
  </ion-row> 
</div>

Answer 4

在你休息时调用代码

this.http.get('https://example.com/api').subscribe(data => {
this.categories = data.json().results[0].list;
});

在您的HTML代码中

<div *ngFor="#fruit of categories">
 <ion-row>
  <ion-col>
  <div class="txt">{{fruit[0]}}</div>
  </ion-col>
  </ion-row>
  </div>

迭代JSON数组并设置其元素样式

4 个答案: