javascript - 使用ngFor循环时遇到问题

我对Angular 2相当陌生，在我的项目中陷入僵局。我想使用*ngFor指令遍历对象数组，以使用<div *ngFor="let gig of gigs">在“列表视图”中显示其内容。同时，我想支持幻灯片显示视图，用户可以单击“后退”或“下一个”进行导航。问题是，要使幻灯片显示正常工作，需要默认设置为第一张幻灯片，即数组中的第一个对象：

this.initialSlide = 0;
this.gigs = this.resume[this.initialSlide];

我的数据存储在this.resume：[[{Object1}],[{Object2}],[{Object3}]]中。我试图通过将gigs属性设置为this.resume来使“列表视图”工作，但该视图为空白。我认为是因为它遍历数组并需要指定索引。但是，当我确实指定索引时，默认幻灯片将跳闸，因为它已被设置为索引0（上方）。我在下面包含了我的代码，如果需要澄清，请告诉我。

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

@Component({
  selector: 'app-app-resume',
  styleUrls: ['./app-resume.component.css'],
  template: `
<div ng-click='check(count)'>
<br>
<div *ngFor="let gig of gigs">
<div class = "size">
<h2>{{gig.company}}</h2>
<br>
<h3>{{gig.Date}}</h3>
<ul *ngFor="let duty of gig.duties">
<li>{{duty}}</li>
</ul>
</div>
</div>
<button (click)="cycle(-1)">back</button>
<button (click)="cycle(1)">next</button>
<button (click)="cycle('all')">full list view</button>
</div>
`
})

export class AppResumeComponent implements OnInit {
    resume;
  message;
  initialSlide;
  gigs;
  gig;
  ngOnInit() {
    this.resume = [
        [{company:'Heavy', position: 'Tech Contributor', Date:'October 2016 - December 2016','duties':['Identify, research and publish stories that will generate significant organic traffic','Manage all aspects of the publishing process on WordPress','Analyze data from Dataminr, Google AdWords and Google Trends to find trending topics']}],
        [{company:'Steele Consulting', position:'Media Coordinator', Date:'April 2013 - October 2015','duties':['Boosted organic traffic to website by 34 percent through SEO and revamped blog','Launched whatasteele radio, the podcast about entrepreneurship in real estate']}],
        [{company:'Wochit',position: 'Creator',Date:'April 2015 - October 2015','duties':['Produced videos that made our YouTube channel’s Top 25 for a subscriber base of over 25K people','Internally recognized twice for exceeding the threshold of videos created']}],
        [{company:'Inc.',position: 'Editorial Intern',Date:'March 2015 - June 2015','duties':['Created the 2015 Best in Class Awards page, a guide to the nation’s best designed products','Internally recognized twice for exceeding the threshold of videos created','Wrote 40 posts about start-up conferences, business executives, and national news']}],
        [{company:'The Chicago Tribune',position: 'Assistant Video Producer',Date:'Sept 2014 - Dec 2014','duties':['Shot & Produced breaking news videos and used Chartbeat to promote videos on landing page']}]
    ]
    this.initialSlide = 0;
    this.gigs = this.resume[this.initialSlide];
}

  cycle(d){
    if  (d == 'all'){
      console.log('all initiated')
      this.gigs = this.resume
    }
    else{
        this.initialSlide += d
        if (this.initialSlide >= this.resume.length )
        {this.initialSlide -= 1}
        else if (this.initialSlide < 0)
        {this.initialSlide += 1}
        else{
            this.gigs = this.resume[this.initialSlide]}
    }
  };  }

编辑：恐怕我对我对项目的期望还不清楚。我希望这个插图以及一个更简单的链接可以使事情更清楚：

柱塞：https://plnkr.co/edit/PKDH9tDLHnjrK4flyK1A?p=preview

最佳答案

您的代码是正确的，除了“ Array of array”。您想要显示resume信息的方式要求您将“公司信息”作为对象而不是数组放置在resume中。

this.resume = [
        {company:'Heavy', position: 'Tech Contributor', Date:'October 2016 - December 2016','duties':['Identify, research and publish stories that will generate significant organic traffic','Manage all aspects of the publishing process on WordPress','Analyze data from Dataminr, Google AdWords and Google Trends to find trending topics']},
        {company:'Steele Consulting', position:'Media Coordinator', Date:'April 2013 - October 2015','duties':['Boosted organic traffic to website by 34 percent through SEO and revamped blog','Launched whatasteele radio, the podcast about entrepreneurship in real estate']},
        {company:'Wochit',position: 'Creator',Date:'April 2015 - October 2015','duties':['Produced videos that made our YouTube channel’s Top 25 for a subscriber base of over 25K people','Internally recognized twice for exceeding the threshold of videos created']},
        {company:'Inc.',position: 'Editorial Intern',Date:'March 2015 - June 2015','duties':['Created the 2015 Best in Class Awards page, a guide to the nation’s best designed products','Internally recognized twice for exceeding the threshold of videos created','Wrote 40 posts about start-up conferences, business executives, and national news']},
        {company:'The Chicago Tribune',position: 'Assistant Video Producer',Date:'Sept 2014 - Dec 2014','duties':['Shot & Produced breaking news videos and used Chartbeat to promote videos on landing page']}
    ]

但是您需要更改将值分配给this.gigs变量的方式。
而不是写作

 this.gigs = this.resume[this.initialSlide];

你应该做 ：

this.gigs = [this.resume[this.initialSlide]];

但是当您要显示整个列表时，请直接将resume的值赋给gigs

 this.gigs = this.resume

这是工作代码：

https://plnkr.co/edit/YmlGqPca5SCMe66nagvd?p=preview

关于javascript - 使用ngFor循环时遇到问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42476632/