通过阵列角度2的循环

Question

我有一个数组，我想一次只显示数组中的一个对象。一旦我有一个对象显示我然后想通过按钮循环访问该数组。我能够让数组显示，但我无法弄清楚如何一次只显示一个对象。这是我迄今为止的plunker。

我不确定在这种情况下我是否正确使用*ngFor。谢谢你的帮助！

Answer 1

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

Plunker example

Answer 2

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