Question

我对Angular 2很陌生，而且我的项目陷入僵局。我想使用*ngFor指令循环遍历一个对象数组，以便在列表视图中显示其内容。使用<div *ngFor="let gig of gigs">。同时，我想支持幻灯片显示视图，用户可以点击“返回”按钮。或者＆＃39; next＆＃39;导航。问题是，让幻灯片显示工作需要默认为第一个幻灯片，即数组中的第一个对象：

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

我的数据存储在this.resume：[[{Object1}],[{Object2}],[{Object3}]]中。我试图获得列表视图＆＃39;通过将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]}
    }
  };  }

编辑：我担心我对项目的期望并不清楚。我希望这个插图和一个plunker链接使事情更清楚：

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

Answer 1

您的代码是正确的，除了＆＃34;数组数组＆＃34;。您希望显示resume信息的方式要求您提供＆＃34;公司信息＆＃34;作为对象而不是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

Answer 2

this.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']}
]

此更改应使代码正常工作

Answer 3

在查看了plunker之后，我们可以通过更改full list view函数来生成cycle()，如下所示。

cycle(d){
if  (d == 'all'){
  console.log('all initiated')
  this.gigs = [];
  // reduce resume array to single dimensional array
  this.resume.forEach(val => this.gigs.push(val[0]));
}
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]
        }

 }
};

这是updated plunker

您的需求有许多可能的解决方案，而且这是对代码进行最小更改的解决方案。

无法使用ng

3 个答案: