如果图标和文本不在JSON文件中，我如何循环Angluar中的环组件中的项列表？

Question

我已经做了一张卡，在那里我试图展示我的项目和一些元数据。大多数元数据是一次性数据，所以我不需要循环它们。

但是角色部分(在这张图片中突出显示)在它们中有多个角色。一些卡片将有2个角色和4个角色。我不知道如何在已经存在的循环组件中循环它们。

下面是我的代码ATM机的工作方式：

着陆/项目-部分/着陆-Projects.Component.html

<div class="container-fluid common-page-container landing-projects-container">
    <div #target class="container-fluid content-container">
        <h1 class="common-page-header-h1 with-subheader">
            Fortune favours the bold <span>(font)</span>
        </h1>
        <div class="common-page-sub-header">
            Over my 8+ years of designing, I have been lucky enough to work with some amazing people & teams. Together, we’ve <br>
            discussed and figured user problems, debated the best UX to solve them, and delivered decent products to test the water.<br>
            Below is a selected list of projects that I’ve helped companies design & build over the years.<br>
            Some are a success, some are a failure - but all learning in disguise ✨
        </div>
        <div class="row">
            <div *ngFor="let item of data" class="landing-projects-section-container col-12">
                <component-projects-card ProjectTitle={{item.ProjectTitle}} ProjectDescription={{item.ProjectDescription}} ProjectImage={{item.ProjectImage}} ProjectDate={{item.ProjectDate}} ProjectWorkTitle={{item.ProjectWorkTitle}} ProjectRoles1={{item.ProjectRoles1}} ProjectRoles2={{item.ProjectRoles2}} ProjectRoles3={{item.ProjectRoles3}} ProjectRoles4={{item.ProjectRoles4}}>
                </component-projects-card>
            </div>
        </div>
    </div>
</div>

着陆/项目-分段/着陆-项目。组件。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'component-landing-projects',
  templateUrl: './landing-projects.component.html',
  styleUrls: ['./landing-projects.component.css']
})
export class LandingProjectsComponent implements OnInit {

  data: any =

    [
      {
        "ProjectTitle": "SellerCrowd",
        "ProjectDescription": "Designing a social platform to help salespeople exchange insights anonymously & hit sales goals faster.",
        "ProjectImage": "../assets/projects/project-tiles/sellercrowd.png",
        "ProjectDate": "Jan ’18 - Oct ‘21",
        "ProjectWorkTitle": "Senior Product Designer",
        "ProjectRoles1": "I was hired by SellerCrowd during a time when the code + design wasn’t scalable. The company was looking to redesign the product from scratch.",
        "ProjectRoles2": "Understood user problems by looking at user feedback, talking to users, & analyzing user behavior with tools like Smartlook.",
        "ProjectRoles3": "Working cross-functionally to define product strategy & roadmaps in collaboration with the Product & Engg. team - while keeping in mind the user and business goals and trying to strike a balance between the two.",
        "ProjectRoles4": "Designing + prototyping solutions and ensuring pixel-perfect implementation of the interface & experience in collaboration with the QA & Engg. team.",
        "ProjectRandomFact": "SellerCrowd was my first remote job and my  first day with the company was at a company-wide yearly meetup in Madrid, Spain ",
        "ProjectTeamSize": "2 PMs, 9 Devs, 3 QAs, 1 Designer (me)",
        "ProjectURL": "www.sellercrowd.com",
      },
    ]

  constructor() { }

  ngOnInit(): void {

  }

}

着陆/项目-卡片/项目-卡片.组件.card

<div class="row projects-card-container">
    <div class="col-5 projects-card-container-left">
        <div class="projects-card-container-image" [ngStyle]="{'background-image': 'url(\''+ ProjectImage + '\')'}">
        </div>
    </div>
    <div class="col-7 projects-card-container-right">
        <div class="col-12">
            <div class="projects-card-container-right-title-description">
                <span class="projects-card-title">{{ProjectTitle}}</span>
                <span class="projects-card-title-right-line">------</span>
                <span class="projects-card-description">{{ProjectDescription}}</span>
            </div>
            <div class="">
                <div class="d-flex projects-card-container-right-meta-data">
                    <div class="">
                        <img src="../assets/projects/icon-time.svg" alt="" class="projects-card-container-right-meta-data-icons icon-project-date">
                    </div>
                    <div class="projects-card-container-right-meta-data-text">
                        {{ProjectDate}}
                    </div>
                </div>
                <div class="d-flex projects-card-container-right-meta-data">
                    <div class="">
                        <img src="../assets/projects/icon-title.svg" alt="" class="projects-card-container-right-meta-data-icons icon-project-title">
                    </div>
                    <div class="projects-card-container-right-meta-data-text">
                        {{ProjectWorkTitle}}
                    </div>
                </div>
                <div class="d-flex projects-card-container-right-meta-data">
                    <div class="">
                        <img src="../assets/projects/icon-roles.svg" alt="" class="projects-card-container-right-meta-data-icons icon-project-role">
                    </div>
                    <div class="projects-card-container-right-meta-data-text">
                        {{ProjectRoles1}}
                    </div>
                </div>
                <div class="d-flex projects-card-container-right-meta-data">
                    <div class="">
                        <img src="../assets/projects/icon-roles.svg" alt="" class="projects-card-container-right-meta-data-icons icon-project-role">
                    </div>
                    <div class="projects-card-container-right-meta-data-text">
                        {{ProjectRoles2}}
                    </div>
                </div>
                <div class="d-flex projects-card-container-right-meta-data">
                    <div class="">
                        <img src="../assets/projects/icon-roles.svg" alt="" class="projects-card-container-right-meta-data-icons icon-project-role">
                    </div>
                    <div class="projects-card-container-right-meta-data-text">
                        {{ProjectRoles3}}
                    </div>
                </div>
                <div class="d-flex projects-card-container-right-meta-data">
                    <div class="">
                        <img src="../assets/projects/icon-roles.svg" alt="" class="projects-card-container-right-meta-data-icons icon-project-role">
                    </div>
                    <div class="projects-card-container-right-meta-data-text">
                        {{ProjectRoles4}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

着陆/项目.卡片/项目.卡片.组件

import { Component, OnInit, AfterViewInit, Input } from '@angular/core';

@Component({
  selector: 'component-projects-card',
  templateUrl: './projects-card.component.html',
  styleUrls: ['./projects-card.component.css']
})
export class ProjectsCardComponent implements OnInit {

  @Input()
  ProjectTitle: String

  @Input()
  ProjectDescription: String

  @Input()
  ProjectImage: String

  @Input()
  ProjectDate: String

  @Input()
  ProjectWorkTitle: String

  @Input()
  ProjectRoles1: String

  @Input()
  ProjectRoles2: String

  @Input()
  ProjectRoles3: String

  @Input()
  ProjectRoles4: String

  @Input()
  ProjectRandomFact: String

  @Input()
  ProjectTeamSize: String

  @Input()
  ProjectURL: String

  constructor() { }
  ngOnInit(): void { }
}

Answer 1

1. 为什么不创建一个角色数组呢？

export class LandingProjectsComponent implements OnInit {

  data: any =

    [
      {
        "ProjectTitle": "SellerCrowd",
        "ProjectDescription": "Designing a social platform to help salespeople exchange insights anonymously & hit sales goals faster.",
        "ProjectImage": "../assets/projects/project-tiles/sellercrowd.png",
        "ProjectDate": "Jan ’18 - Oct ‘21",
        "ProjectWorkTitle": "Senior Product Designer",
        "roles": [
         "I was hired by SellerCrowd during a time when the code + design wasn’t scalable. The company was looking to redesign the product from scratch.",
        "Understood user problems by looking at user feedback, talking to users, & analyzing user behavior with tools like Smartlook.",
        "Working cross-functionally to define product strategy & roadmaps in collaboration with the Product & Engg. team - while keeping in mind the user and business goals and trying to strike a balance between the two.",
        "Designing + prototyping solutions and ensuring pixel-perfect implementation of the interface & experience in collaboration with the QA & Engg. team."
        ]
        "ProjectRandomFact": "SellerCrowd was my first remote job and my  first day with the company was at a company-wide yearly meetup in Madrid, Spain ",
        "ProjectTeamSize": "2 PMs, 9 Devs, 3 QAs, 1 Designer (me)",
        "ProjectURL": "www.sellercrowd.com",
      },
    ]

  constructor() { }

  ngOnInit(): void {

  }

}

然后把它们循环起来

<div class="row projects-card-container">
    <div class="col-5 projects-card-container-left">
        <div class="projects-card-container-image" [ngStyle]="{'background-image': 'url(\''+ ProjectImage + '\')'}">
        </div>
    </div>
    <div class="col-7 projects-card-container-right">
        <div class="col-12">
            <div class="projects-card-container-right-title-description">
                <span class="projects-card-title">{{ProjectTitle}}</span>
                <span class="projects-card-title-right-line">------</span>
                <span class="projects-card-description">{{ProjectDescription}}</span>
            </div>
            <div class="">
                <div class="d-flex projects-card-container-right-meta-data">
                    <div class="">
                        <img src="../assets/projects/icon-time.svg" alt="" class="projects-card-container-right-meta-data-icons icon-project-date">
                    </div>
                    <div class="projects-card-container-right-meta-data-text">
                        {{ProjectDate}}
                    </div>
                </div>
                <div class="d-flex projects-card-container-right-meta-data">
                    <div class="">
                        <img src="../assets/projects/icon-title.svg" alt="" class="projects-card-container-right-meta-data-icons icon-project-title">
                    </div>
                    <div class="projects-card-container-right-meta-data-text">
                        {{ProjectWorkTitle}}
                    </div>
                </div>
                <div *ngFor="let role of roles" class="d-flex projects-card-container-right-meta-data">
                    <div class="">
                        <img src="../assets/projects/icon-roles.svg" alt="" class="projects-card-container-right-meta-data-icons icon-project-role">
                    </div>
                    <div class="projects-card-container-right-meta-data-text">
                        {{role}}
                    </div>
                </div>
                <div class="d-flex projects-card-container-right-meta-data">
                    <div class="">
                        <img src="../assets/projects/icon-roles.svg" alt="" class="projects-card-container-right-meta-data-icons icon-project-role">
                    </div>
                    <div class="projects-card-container-right-meta-data-text">
                        {{ProjectRoles4}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

1. 另外，不要在@Input()中做那么多的ProjectsCardComponent参数。创建一个单独的param，比方说@INput() data，并创建一个obj，其中包含您要单独传递的所有属性。原因

• 您可以使用类型记录为该对象创建type，并控制所需内容。
• 您将在HTML上有较少的代码，并且可以将创建适当有效负载的责任转移到组件中。更好的品质！
• 还有其他原因，但是接下来我们需要深入研究应该如何设计组件等等。它会偏离这个问题。