遍历 api 按钮点击数据 angular 5

Question

我有一些从外部调用的数据 api。现在我想要做的是在我的页面上有一个循环访问数据的按钮..

所以.. 例如，我的网站上有一个页面，该页面有一个标题和一些来自 api 的文本，而我从 api 收到的数据是

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

现在我想将第一项插入到标题中 div 然后将文本插入到正文中 div

所以有点像..

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

然后，当我单击页面上的 next 按钮时，我希望标题和文本更新为第二项，因此 title 2 和 text 我不是 100%我会做这样的事情..

所以我的设置如下

contentful.service.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);
  }

}

app.component.ts

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);
      });
  }

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

如有任何帮助，我们将不胜感激

谢谢

Answer 1

<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++;
}

你可以试试上面的方法。

假设您已从服务中取回 programItems 数组并且所有内容均已正确填充，那么您可以使用计数器作为数组索引并在每次单击“下一步”按钮时递增它。

遍历 api 按钮点击数据 angular 5

Iterate through api data on button click angular 5

javascript

typescript

contentful

angular