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

通过按钮单击角度5迭代api数据

1 个答案: