Nativescriptスクロール時にRadListView入力要素の値がジャンプする

Question

各行/セルにTextFieldとTextViewを持つRadListViewを使用してリストを作成しようとしています。リストは正しく表示されますが、リストがスクロールするのに十分な長さで、「hello」や「scroll」などの入力フィールドに何かを入力すると、「hello」はランダムに別の項目に移動します。

例： 50行のリスト。行1のテキストフィールドに「hello」と入力します。行1がもう表示されないようにスクロールします。行12のテキストフィールドに「hello」が表示されます.1行目にスクロールして、テキストフィールドが空です。

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リストビューと同じ結果を得ています：私は12行下にスクロールし、その空が、「hello」を今...行18のテキストフィールドに表示さなどここで

コードです私はそのバグだとは思わない。

これを修正するにはどうすればよいですか？

TNS --version：3.1.2

クロスプラットフォーム・モジュールのバージョン：3.1.0

Answer 1

ついにだから私は、私は活字体との角度使用し、これまでのところ唯一のAndroid上でテストしてい

Hamdi Wの助けを借りて解決策を見つけました。すべてのクレジットは彼に行きます。ここで

は、それが将来的には同じ問題がある可能性があります誰のためにある：（returnPress）

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（）関数であり、あなたが変更することができます=「onReturn（$イベント）」へ私たちは、この機能を削除

：：（textChange）= "onReturn（$イベント）" ここ

Answer 2

私が見つけたはるかに簡単な答えがあるが、我々はそれを用いNativescript 2ウェイバインディングを取得することができます（returnPress）= "onReturn （$ event） "と、この[text] =" item.quantity "を置き換え、[（ngModel）] =" products [i] .qu

これで、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)); 
    } 
} 

}