![](/img/trans.png)
[英]Access the index of a parent listview in a nested repeater in a Nativescript layout
[英]NativeScript index in the list of Repeater items
我試圖在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。
我在這里為您創建了一個plyground。 您可以在數據提供者中傳遞唯一ID,並且可以在項中訪問。
PS:在中繼器中有一個開放的Feature-request
以支持索引,您也可以在那里投票。
在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>
大家好,謝謝。 我所做的在不更改任何代碼庫的情況下將本地生成的ID推送到JSON元素中並將其用於索引。 現在json具有{“ my_index”:“ 0” .....},當提取結束時,我會在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));
})
我想這也可能對某人有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.