我想要完成的是迭代一个对象,每个对象都有一个 type
属性。目标是迭代每个对象并将它们显示在由其类型
指定的行中。
我想做的是将前端、后端和 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"
]
}
]
}
}
接受任何和所有反馈,谢谢!
最佳答案
您只是循环访问项目类型,但不将该数据用于任何用途。内部循环遍历所有项目并列出所有项目,无论它们的类型是什么。
您需要重构数据,以便 projectType
充当该类型所有项目的容器,或者添加一个 if
来检查项目的类型与 projectType
匹配,如下所示:(请原谅,我从未真正使用过 Aurelia,因此可能无法按原样工作)
<div if.bind="projectType == project.type">
<h3 class="${project.type}">${project.type}</h3>
<h1>${project.name}</h1>
</div>
关于javascript - 如何遍历一个对象,然后将其显示在单独的行中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44426298/