配列角度2を循環する

Question

私は配列を持っていますので、一度に1つのオブジェクトしか配列に表示しません。一度オブジェクトが表示されたら、そのアレイをボタンで循環させたいと思っています。配列を表示させることはできますが、一度に1つのオブジェクトを表示するしか方法がわかりません。ここまで私が持っているもののうち、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); 
    } 
}