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

}