通過陣列角度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); 
    } 
}