Question

我正在尝试使用RadListView在每行/单元格中使用TextField和TextView构建一个列表。列表显示正确，但是当列表足够长以滚动并且我在输入字段中输入任何内容时，例如“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得到了相同的结果，所以我认为它不是一个错误。

我该如何纠正？

我正在使用Angular和Typescript，到目前为止仅在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（$ event）”更改为（textChange）=“onReturn（$ event）”

Answer 2

这是我发现的一个更简单的答案，我们可以使用Nativescript 2路绑定得到相同的结果：

我们删除此函数：（returnPress）=“onReturn（$ event）”和此[text] ='item.quantity'并替换为[（ngModel）] =“products [i] .quantity”

现在，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));
    }
}

}

滚动时，Nativescript RadListView输入元素值跳转

2 个答案: