Javascript 在按钮5上迭代api数据

我有一些从外部api调用的数据。现在我想做的是在我的页面上有一个按钮，可以遍历数据

所以。。例如，假设我在我的站点上有一个页面，它有一个标题和一些来自api的文本，我从api接收回来的数据是

{
    fields: {
        title: 'title 1',
        text: 'this is some text'
    }
},
{
    fields: {
        title: 'title 2',
        text: 'this is some more text'
    }
},

现在，我希望将第一项插入到title div中，然后将文本插入到text div中

比如说

<div class="title">{{response.fields.title}}</div>
<div class="text">{{response.fields.text}}</div>

应用程序组件.ts

@Injectable()
export class ContentfulService {
  private cdaClient = createClient({
    space: CONFIG.space,
    accessToken: CONFIG.accessToken
  });

  constructor() { }

  getProgramItems(query?: object): Promise<Entry<any>[]> {
    return this.cdaClient.getEntries(Object.assign({
      content_type: CONFIG.contentTypeIds.programItems
    }, query))
    .then(res => res.items);
  }

}

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ContentfulService } from '../contentful.service';
import { Entry } from 'contentful';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  // define private class properties
  private programItems: Entry<any>[] = [];
  constructor(
    private contentfulService: ContentfulService
  ) { }


  ngOnInit() {
    this.contentfulService.getProgramItems()
      .then(programItems => this.programItems = programItems)
      .then(() => {
        console.log(this.programItems);
      });
  } 

从'@angular/core'导入{Component，OnInit，AfterViewInit}；
从“../contentful.service”导入{ContentfulService}；
从“contentful”导入{Entry}；
@组成部分({
选择器：'应用程序产品列表'，
templateUrl:'./product list.component.html'，
样式URL:['./product list.component.css']
})
导出类ProductListComponent实现OnInit{
//定义私有类属性
私有程序项：条目[]=[]；
建造师(
私有contentfulService:contentfulService
) { }
恩戈尼尼特（）{
this.contentfulService.getProgramItems（）
.then（programItems=>this.programItems=programItems）
.然后（（）=>{
console.log（this.programItems）；
});
} 

所以基本上我想让每个程序项的标题和文本在点击按钮时更新页面上的标题和文本div，我考虑过使用ES6生成器，但我不确定在这种情况下如何使用它

任何帮助都将不胜感激

谢谢

{{currentItem.title}
{{currentItem.text}
下一个
公共计数器：编号=0；
公共项目：条目；
goToNext（）{
如果（this.counter>this.programItems.length）this.counter=this.programItems.length；
this.currentItem=this.programItems[this.counter]；
这个.counter++；
}

你可以试试上面的东西

假设您已经从服务中获得了

programItems

数组，并且所有数组都已正确填充，那么您可以使用计数器作为数组索引，并在每次单击“下一步”按钮时将其递增。

{{currentItem.title}
{{currentItem.text}
下一个
公共计数器：编号=0；
公共项目：条目；
goToNext（）{
如果（this.counter>this.programItems.length）this.counter=this.programItems.length；
this.currentItem=this.programItems[this.counter]；
这个.counter++；
}

你可以试试上面的东西

---

假设您已从服务中恢复了

programItems

数组，并且所有数组都已正确填充，则您可以使用计数器作为数组索引，并在每次单击“下一步”按钮时将其递增。

答案是否有帮助？如果您能接受/标记它，将不胜感激。谢谢您提供了答案帮助吗？将不胜感激如果你能接受/标记，谢谢

<div class="title">{{currentItem.title}}</div>
<div class="text">{{currentItem.text}}</div>
<button (click)="goToNext()">Next</button>

public counter: number = 0;
public currentItem: Entry<any>;

goToNext() {
    if (this.counter > this.programItems.length) this.counter = this.programItems.length;
    this.currentItem = this.programItems[this.counter];
    this.counter++;
}