Question

我想要完成的是迭代一个对象，每个对象都有一个type属性。目标是迭代每个对象并将它们显示在由type指定的行中。

现在看起来像这样

我尝试做的是在不同的行上安装前端，后端和用户界面。

我使用 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>

如何遍历对象但在单独的行中显示？

1 个答案: