我想在离子卡中显示来自 JSON 的多张图片

Question

我目前拥有的是，它显示了您在一个小组中有多少学生。但我想在离子卡上展示每个学生的照片。如果有人能帮我，那就好了！

提前感谢！

  <ion-header>
  <ion-navbar color ="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Amcik</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-searchbar>
</ion-searchbar>
  <ion-grid>
    <ion-row>
      <ion-col col-12 col-md *ngFor="let item of items">
        <ion-card>
            <ion-item>
        <h2>{{ item.name }}</h2>
        <p>{{ item.count }} leerlingen</p>
       <ion-avatar item-left *ngIf="item.groep === 'Groep 1'">
          <img src="{{item.avatar}}">
        </ion-avatar>
      </ion-item>
        </ion-card>
      </ion-col>
    </ion-row>
</ion-grid>
</ion-content>

  import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
  selector: 'page-page2',
  templateUrl: 'page2.html'
})
export class Page2 {
items:any;
    constructor(private navCtrl: NavController) {
      this.initializeItems();
    }
    initializeItems() {
      this.items = [
      {name: 'Hasan Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {name: 'Amcik Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {name: 'Pezo Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {name: 'Ala Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {name: 'Ebenin Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {name: 'Ami Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {name: 'Emrah Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {name: 'Danny Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {name: '6pack Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {name: 'Marco van Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {name: 'Shabalasdbah  Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {name: 'Lange namen Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 4 '},
      {name: 'Yarrag Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'}
      ]

          let groups = [
                      {
                              name: 'Groep 1',
                              count: 0,
                              items: [],
                      },
                      {
                              name: 'Groep 2',
                              count: 0,
                              items: [],
                      },
                      {
                              name: 'Groep 3',
                              count: 0,
                              items: [],
                      },
                      {
                              name: 'Groep 4',
                              count: 0,
                              items: [],
                      }
              ]

              for(var j = 0; j < groups.length; j++) {
                      for(var i=0; i<this.items.length; i++) {
                              if (this.items[i].groep == groups[j].name) {
                                      groups[j].count++;
                                      groups[j].items.push(this.items[i]);
                              }
                      }
              }
              this.items = groups;
      }
}

Answer 1

您缺少显示属于每个组的所有学生的内部迭代。所以像这样：

<ion-col col-12 col-md *ngFor="let item of items">
  <ion-card>
    <ion-item>
      <h2>{{ item.name }}</h2>
      <p>{{ item.count }} leerlingen</p>
      <!-- Iterate the students -->
      <ion-item *ngFor="let i of item.items">
        <ion-avatar item-left>
          <img src="{{i.avatar}}">
        </ion-avatar>
      </ion-item>
    </ion-item>
  </ion-card>
</ion-col>

演示

Answer 2

也许这可以帮助您，请尝试在您创建的每个组块中实现一个*ngIf。

<ion-item>
           <ion-avatar item-left *ngIf="item.groep === 'Groep 1'">
              <img src="{{item.avatar}}">
            </ion-avatar> 
</ion-item>