如何遍历对象，然后在单独的行中显示呢？

Question

我要完成的工作是遍历一个对象，每个对象都有一个type属性。 目的是遍历每个对象，并将它们显示在按其type指定的行中。

现在看起来像这样

我想做的是将Frontend，Backend和UI放在单独的行上。

我正在使用Aurelia Framework ， 这是我的观点：

<template>
<div class="project-preview-container container">
    <div class="row" repeat.for="projectType of projectTypes">
        <div class="col-md-3 project-preview" repeat.for="project of projects">
            <h3 class="${project.type}">${project.type}</h3>
            <h1>${project.name}</h1>
        </div>
    </div>
</div>

这是我的模特：

export class Portfolio {

constructor() {
    this.header = "Portfolio";
    this.projectTypes = ["Frontend", "Backend", "UI"];
    this.projects = [
        {
            name: "Project Name 1",
            type: "Frontend",
            img: [
                "Image 1",
                "Image 2",
                "Image 3"
            ],
            descriptionTitle: [
                "Description Title 1",
                "Description Title 2",
                "Description Title 3"
            ],
            description: [
                "Description 1",
                "Description 2",
                "Description 3"
            ]
        },
        {
            name: "Project Name 2",
            type: "Frontend",
            img: [
                "Image 1",
                "Image 2",
                "Image 3"
            ],
            descriptionTitle: [
                "Description Title 1",
                "Description Title 2",
                "Description Title 3"
            ],
            description: [
                "Description 1",
                "Description 2",
                "Description 3"
            ]
        },
        {
            name: "Project Name 3",
            type: "Backend",
            img: [
                "Image 1",
                "Image 2",
                "Image 3"
            ],
            descriptionTitle: [
                "Description Title 1",
                "Description Title 2",
                "Description Title 3"
            ],
            description: [
                "Description 1",
                "Description 2",
                "Description 3"
            ]
        },
        {
            name: "Project Name 4",
            type: "UI",
            img: [
                "Image 1",
                "Image 2",
                "Image 3"
            ],
            descriptionTitle: [
                "Description Title 1",
                "Description Title 2",
                "Description Title 3"
            ],
            description: [
                "Description 1",
                "Description 2",
                "Description 3"
            ]
        }
    ]
}

}

任何和所有反馈都被接受，谢谢！

Answer 1

您只是在遍历项目类型，而不会将该数据用于任何事情。 内循环遍历所有项目并列出所有项目，无论其类型是什么。

您需要重组数据以使projectType充当该类型所有项目的容器，或者添加if来检查项目类型是否与projectType匹配，如下所示：（对不起，我从未真正使用过Aurelia，可能无法按原样工作）

<div if.bind="projectType == project.type">
  <h3 class="${project.type}">${project.type}</h3>
  <h1>${project.name}</h1>
</div>