Angular 循环通过阵列角度2

我有一个数组，我想一次只显示数组中的一个对象。一旦有一个对象显示出来，我就想通过一个按钮在数组中循环。我可以让数组显示，但我不知道如何一次只显示一个对象。这是我到目前为止所拥有的

我不确定在这种情况下是否正确使用了

*ngFor

。谢谢你的帮助

@组件({
@Component({
  selector: 'my-app',
  template: `
    <div>
      <div>{{index}}</div>
      <h2>{{item[index].title}}</h2>
      <button (click)="Next()">next</button>
    </div>
  `,
})
export class App {
  public item = ITEM;
  constructor() {}
  index = 0;

  Next(id){
    this.index ++;
    if(this.index >= this.item.length) {
      this.index = 0;
    }
  }
}

选择器：“我的应用程序”，
模板：`
{{index}}
{{item[index].title}
下一个
`,
})
导出类应用程序{
公共项目=项目；
构造函数（）{}
指数=0；
下一个（id）{
这是index++；
如果（this.index>=this.item.length）{
该指数=0；
}
}
}

@组件({
选择器：“我的应用程序”，
模板：`
{{index}}
{{item[index].title}
下一个
`,
})
导出类应用程序{
公共项目=项目；
构造函数（）{}
指数=0；
下一个（id）{
这是index++；
如果（this.index>=this.item.length）{
该指数=0；
}
}
}

@组件({
选择器：“我的应用程序”，
模板：`
{{myItems.title}
{{index}}
下一个
`,
})
导出类应用程序{
公共项目=项目；
公共指数=0；
公共获取项目（）{
返回此.item.filter（（item，index）=>index
@Component({
选择器：“我的应用程序”，
模板：`
{{myItems.title}
{{index}}
下一个
`,
})
导出类应用程序{
公共项目=项目；
公共指数=0；
公共获取项目（）{
返回此.item.filter（（item，index）=>index，您不需要它来显示单个值。您所需要的只是要显示的索引：{{myArray[theDisplayedIndex]}.Now使用按钮递增显示索引，您就有了解决方案。请在问题本身中提供所有相关代码，而不是在第三方网站上提供。您不需要ngFor来显示单个值。您所需要的是要显示的索引：{{myArray[theDisplayedIndex]}。现在用按钮增加显示索引，您就有了解决方案。请在问题本身中提供所有相关代码，而不是在第三方网站上提供。
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 *ngFor="let myItems of items">{{myItems.title}}</h2>
      {{index}}
      <button (click)="next()">next</button>
    </div>
  `,
})
export class App {
  public item = ITEM;
  public index = 0;

  public get items() {
    return this.item.filter((item, index) => index <= this.index);
  }
  constructor() {}

  public next(){
   this.index = Math.min(++this.index, this.item.length - 1);
  }
}