Nativescript RadListView輸入元素值在滾動時跳轉

Question

我想在每行/單元格中使用帶有TextField和TextView的RadListView構建列表。該列表正確顯示，但是當列表足夠長時間滾動並且我在輸入字段中輸入任何內容（例如「hello」）並滾動時，「hello」將隨機移動到不同的項目。

示例： 列出50行。我在第1行的文本框中輸入「hello」。向下滾動，以便第1行不再可見。 「Hello」出現在第12行的文本字段中。我滾動回第1行，文本字段爲空。我向下滾動到第12行和空，但「你好」現在顯示了在排18的文本框...等

下面是代碼：

import { Component } from "@angular/core"; 


class DataItem { 
constructor(public id: number, public name: string) { } 
} 

@Component({ 
selector: "orderpage_rad", 
template: ` 
<StackLayout> 
<RadListView [items]="myItems"> 
    <ng-template tkListItemTemplate let-item="item" let-i="index"> 
    <StackLayout> 
     <Label [text]='"index: " + i'></Label> 
     <Label [text]='"name: " + item.name'></Label> 
     <TextField keyboardType="number" hint="quantity"></TextField>    
     <TextView hint="enter text" editable="true"></TextView>    
    </StackLayout> 
    </ng-template>     
</RadListView> 
</StackLayout> 
`  
}) 

export class orderComponent_rad { 


public myItems: Array<DataItem>; 
private counter: number; 

constructor(){ 

    this.myItems = []; 
    this.counter = 0; 
    for (var i = 0; i < 50; i++) { 
     this.myItems.push(new DataItem(i, "data item " + i)); 
     this.counter = i; 
    }    
} 

} 

我正在與正常nativescript的ListView相同的結果，所以我不認爲它是一個錯誤。

我該如何解決這個問題？

我使用的角度與打字稿，至今只測試在Android：

TNS --version：3.1.2

跨平臺模塊版本：3.1.0

Answer 1

所以最後在Hamdi W.的幫助下找到了一個解決方案。所有功勞都歸功於他。

這是爲可能在未來同樣的問題，任何人：

import { Component, OnInit } from "@angular/core"; 
import {TextField} from 'tns-core-modules/ui/text-field'; 

class ProductItem { 
constructor(
    public id: number, 
    public name: string, 
    public quantity: number 
) { } 
} 

@Component({ 
selector: "Home", 
moduleId: module.id, 
template: ` 
    <StackLayout> 
     <Label text='submit' (tap)="submit()"></Label> 
     <ListView [items]="products"> 
      <ng-template let-item="item" let-i="index"> 
       <StackLayout> 
        <Label [text]='"name: " + item.name'></Label> 
        <TextField keyboardType="number" 
           [id]='item.id' 
           [hint]="'quantity' + i" 
           [text]='item.quantity' 
           (returnPress)="onReturn($event)" 
        </TextField> 
        <Label [text]='item.quantity'></Label> 
       </StackLayout> 
      </ng-template> 
     </ListView> 
    </StackLayout> 
` 
}) 
export class HomeComponent{ 
public products: Array<ProductItem>; 

constructor(){ 
    this.products = []; 
    for (var i = 0; i < 50; i++) { 
     this.products.push(new ProductItem(i, "data item " + i, i)); 
    } 
} 

private submit() 
{ 
    //send to server this.products 
} 

public onReturn(args) { 
    const {id, text} = <TextField>args.object; 

    this.products = this.products.map(product => { 
     if(product.id === parseInt(id)){ 
      product.quantity = parseInt(text); 
     } 
     return product; 
    }); 
} 
} 

的解決方案是onReturn（）函數，你可以改變（returnPress）=「onReturn（$事件）」，以（textChange）= 「onReturn（$事件）」

Answer 2

這是一個非常簡單的答案，我發現，我們可以得到相同的使用Nativescript 2路結合：

我們刪除這個功能：（returnPress）=「onReturn （$ event）「和this [text] ='item.quantity'並替換爲[（ngModel）] =」products [i] .qu antity「

現在，在TextField中所做的任何更改都會自動更新對象，並且當它需要再次呈現元素時，listview將使用新值。

下面是代碼：

import { Component, OnInit } from "@angular/core"; 
import {TextField} from 'tns-core-modules/ui/text-field'; 

class ProductItem { 
constructor(
    public id: number, 
    public name: string, 
    public quantity: number 
) { } 
} 

@Component({ 
selector: "orderpage_rad", 
moduleId: module.id, 
template: ` 
    <StackLayout> 
     <Label text='submit' (tap)="submit()"></Label> 
     <ListView [items]="products"> 
      <ng-template let-item="item" let-i="index"> 
       <StackLayout> 
        <Label [text]='"name: " + item.name'></Label> 
        <TextField keyboardType="number" 
           [id]='item.id' 
           [hint]="'quantity' + i" 
           [(ngModel)]="products[i].quantity"> 
        </TextField> 
        <Label [text]='item.quantity'></Label> 
       </StackLayout> 
      </ng-template> 
     </ListView> 
    </StackLayout> 
` 
}) 
export class orderComponent_rad{ 
public products: Array<ProductItem>; 

constructor(){ 
    this.products = []; 
    for (var i = 0; i < 50; i++) { 
     this.products.push(new ProductItem(i, "data item " + i, i)); 
    } 
} 

}