HTML

Question

在业余时间，我想编写乐趣和帮助他人的代码。我是离子和棱角分明的新手。我不使用数据库只是一个json对象，我从中获取信息。

所以基本上我想要一个带有离子卡的页面与学生和老师。像这样：https://gyazo.com/61933179c66a1bb815e461f1a158a92c
这就是我所拥有的：https://gyazo.com/62123a96be5a2370f4b1300437cff974

用我的方法计算每个人在gro ..但我想按每个等级计算。

HTML

Transition

TS PAGE

<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 class="groep">
              <ion-item>
                <h2>{{ item.name }}</h2>
                </ion-item>
                <div class="foto"*ngFor="let i of item.items">
                    <img class="pic" src={{i.avatar}}>
                </div>
                <p>{{ item.count }} leerlingen</p>
            </ion-card>
          </ion-col>
        </ion-row>
    </ion-grid>
    </ion-content>

提前致谢！

Answer 1

为了满足您的要求，这是我要遵循的要求所以

按groep
迭代已排序的数据并将其存储在由组拆分的新阵列中。
在这个小组中，我们将教师和学生分开，每个都在他们自己的阵列中。

现在我们可以迭代每个组的新数据，并在一个组内迭代学生和教师。

请参阅http://plnkr.co/edit/UAjTVO?p=preview

从Sort array of objects by single key with date value

var groupIndex = -1;

// Sort data by groep
items.sort(function (a, b) {
    let keyA = a.groep;
    let keyB = b.groep;
    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
});

let previousGroupId = '';

// Iterate over all students
for (var i = 0; i < items.length; i++) {

    var element = items[i];

    // Check if the group already is listed if not create one
    if (element.groep !== previousGroupId) {

        this.groupData.push({
            name: element.groep,
            teachers: [],
            students: []
        });

        previousGroupId = element.groep;
        groupIndex++;
    }

    if (element.rank === 'leerling') {
        this.groupData[groupIndex].students.push(element);
    } else {
        this.groupData[groupIndex].teachers.push(element);
    }

}

<强> HTML

<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 group of groupData">
                <ion-card class="groep">
                    <ion-item>
                        <h2>{{ group.name }}</h2>

                        <h3>Students ({{group.students.length}})</h3>

                        <ul>
                            <li *ngFor="let student of group.students">
                                <img [src]="student.avatar" /> {{ student.voornaam }}
                            </li>
                        </ul>

                        <h3>Teachers ({{group.teachers.length}})</h3>
                        <ul>
                            <li *ngFor="let teacher of group.teachers">
                                <img [src]="teacher.avatar" /> {{ teacher.voornaam }}
                            </li>
                        </ul>

                    </ion-item>

                </ion-card>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

试图显示图像并计算每组的教师

HTML

TS PAGE

1 个答案: