简体   繁体   中英

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

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 class="row">
                <div class="center">
                    <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 class="row">
                
                <div class="col">

                    <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 onLoad() {
        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?

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 class="row">
        <div class="center">
            <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 class="row">

        <div class="col">

            <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 onLoad() {
    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;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM