中继器项目列表中的 NativeScript 索引答案

【问题标题】：NativeScript index in the list of Repeater items中继器项目列表中的 NativeScript 索引
【发布时间】：2019-07-20 07:18:48
【问题描述】：

我正在尝试在 NativeScript 中获取和使用列表的索引，在本例中使用的是 Repeater。

这是我的代码：

    <ScrollView>                 
        <Repeater items="{{ sviArtikli }}" itemTemplateSelector="$index">
            <Repeater.itemsLayout>
                    <WrapLayout orientation="horizontal"/>                        
            </Repeater.itemsLayout>
            <Repeater.itemTemplate>
                        <Card:CardView margin="10" width="45%" height="250" item="{{ id }}"  myIndex="{{ $index }}" tap="detaljiArtikla">
                            <grid-layout rows="250, *" columns="*, 50">
                                <Image loaded="slikaUcitana" class="lista-katalozi-slika" id="slicice" opacity="1" stretch="aspectFill" colSpan="3" row="0" src="{{ 'https://url_location/' + slika_image }}" /> 
                            </grid-layout>
                        </Card:CardView>   
            </Repeater.itemTemplate>
        </Repeater> 
    </ScrollView>

带有myIndex="{{ $index }}" 的部分不起作用，因为无法在Repeater 中计算索引。有没有办法可以为转发器中的每个项目获取索引？ - ListView 有效，但在这种情况下我不能使用 listview。

【问题讨论】：

标签： nativescript repeater itemtemplateselector

【解决方案1】：

我已经为你创建了一个 plyground here。您可以在 dataprovider 中传递唯一 ID，并可以在 item 中访问。

附：有一个开放的Feature-request支持repeater中的索引，你也可以在那里投票。

【讨论】：

【解决方案2】：

Repeater 尚不支持访问项目索引，但如果它对您很重要，您可以扩展 Repeater 类以支持索引。

indexed-repeater.ts（针对 tns-core-modules v6.0.1 测试）

import { Repeater } from "tns-core-modules/ui/repeater";
import { CSSType } from "tns-core-modules/ui/layouts/layout-base";
import { parse } from "tns-core-modules/ui/builder";

export module knownTemplates {
    export const itemTemplate = "itemTemplate";
}

@CSSType("Repeater")
export class IndexedRepeater extends Repeater {

    public refresh() {
        if (this.itemsLayout) {
            this.itemsLayout.removeChildren();
        }

        if (!this.items) {
            return;
        }

        const length = this.items.length;
        for (let i = 0; i < length; i++) {
            const viewToAdd = this.itemTemplate ? parse(this.itemTemplate, this) : (<any>this)._getDefaultItemContent(i);
            const dataItem = (<any>this)._getDataItem(i);
            viewToAdd.bindingContext = {
                item: dataItem,
                index: i
            };
            this.itemsLayout.addChild(viewToAdd);
        }

        (<any>this)._isDirty = false;
    }
}

示例用法

<ScrollView xmlns:comps="components/indexed-repeater">
    <comps:IndexedRepeater items="{{ items }}">
        <comps:IndexedRepeater.itemTemplate>
            <Label text="{{ index + ' ' + item.name }}" class="m-10 h3" />
        </comps:IndexedRepeater.itemTemplate>
    </comps:IndexedRepeater>
</ScrollView>

Playground Sample

【讨论】：

【解决方案3】：

大家好，谢谢，它有所帮助。在不更改任何代码库的情况下，我所做的就是将本地生成的 ID 推送到 JSON 元素中并将它们用于索引。现在 json 有 { "my_index": "0" ..... } 当 fetch 结束时我在 for 循环中更改它。我使用这些索引只是为了滚动列表中某些元素的视图。

  http.getJSON("https://....")
  .then(function (response){ 
     for(var i = 0; i < response.length; i++) {            
       response[i].my_index = i; // change response on the fly.
       // do something with response....
     } 
    }, function(error) {
    console.error(JSON.stringify(error));
  })

我想这也可能对某人有所帮助。

【讨论】：