in repeat.for how to index the first item in an array-CodePudding

I have a template that i want to load for the length of my array.So when i load the page first i want it to load the first item in the array and then when next is clicked it loads the next item.

this is my html

<div repeat.for="item of items">
            <div >
                <div >
                    <div>
                        <md-label > ${item.name}</md-label><br /><br />
                        <md-label> ${user.firstName},</md-label><br />
                         <md-label> ${item.Description}</md-label><br />
                        
                    </div>
                </div>

            </div>
            <div >
                
                <div >

                    <md-radio name="myOption" value="0" checked.bind="choice">Never</md-radio><br />
                
                </div>
                <div><a click.delegate="next()">next</a></div>
            </div>
        </div>

async onl oad() {
        this.items= await this.query<ItemQuery, ItemModel>(new ItemQuery({ id: this.id }));
        this.user= await this.query<fetchUser, UserModel>(new fetchUser(this.UserId));
        
        
    }
async next(){}

currently its repeating every item in my items array on load.

an example of my array is

this.items=[{name:"Test1",description:"this is test 1"}]
[{name:"Test2",description:"this is test 2"}]
[{name:"Test3",description:"this is test 3"}]

im not sure how to load on first instance only the values for Test1 and then when next is clicked fetch Test2 details using the above html?

CodePudding user response：

Since only one item is being displayed here, you can index into the items array, and increment the index when next is clicked.

<div>
    <div >
        <div >
            <div>

                <md-label> ${items[index].name}</md-label><br /><br />
                <md-label> ${user.firstName},</md-label><br />
                <md-label> ${items[index].Description}</md-label><br />

            </div>
        </div>

    </div>
    <div >

        <div >

            <md-radio name="myOption" value="0" checked.bind="choice">Never</md-radio><br />

        </div>
        <div><a click.delegate="next()">next</a></div>
    </div>
</div>

async onl oad() {
    this.index = 0;
    this.items = await this.query < ItemQuery, ItemModel > (new ItemQuery({ id: this.id }));
    this.user = await this.query < fetchUser, UserModel > (new fetchUser(this.UserId));
}

async next(){
    this.index = (this.index   1) % this.items.length;
}