在 repeat.for 如何索引數組中的第一項

Question

我有一個模板，我想為我的數組的長度加載。所以當我首先加載頁面時，我希望它加載數組中的第一項，然后在單擊下一步時加載下一項。

這是我的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(){}

目前它在加載時重復我的項目數組中的每個項目。

我的數組的一個例子是

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

我不確定如何僅在第一個實例上加載 Test1 的值，然后在單擊下一步時使用上述 html 獲取 Test2 詳細信息？

Answer 1

由於此處僅顯示一項，因此您可以對 items 數組進行索引，並在單擊next時增加索引。

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