Question

我有这个数组，想根据我的HTML文件中的name值对group值进行分类。

这是我的.TS文件中包含数组的相关部分的片段。

export let Students = [
    {
     'name': 'Alex',
     'age': '14',
     'group': 'Regular',
    },

我试图删除标签，但是没有得到期望的结果。我觉得这是一种更有效，更简单的方法。

Answer 1

您可以按组对第一个数组进行分组，然后遍历两个数组。：

 //so we can access "this" in the callback. 
 let parent = this;
 this.Students.forEach((item) => {
    if(!parent.groupedStudents.hasOwnProperty(item.group)) {
        parent.groupedStudents[item.group] = { title: item.group, students: []}
    }
    parent.groupedStudents[item.group].students.push(item);
});
// we cannot iterate over object in ngFor, so we use only the values.
this.groupedStudents = Object.values(this.groupedStudents);

在您的模板中

<ng-container *ngFor="let item of main.groupedStudents">
    <ion-list-header>
        <ion-label>{{item.title}}</ion-label>
    </ion-list-header>

    <ion-label *ngFor="let student of item.students>{{student.name}}</ion-label>
</ng-container>

我已经使用此here

制作了一个基本的角度应用程序

根据数组值HTML将数组中的项目分组

1 个答案: