Nativescript RadListView输入元素值在滚动时跳转
我正在尝试使用RadListView构建一个列表，在每一行/单元格中使用TextField和TextView。列表显示正确，但当列表足够长，可以滚动时，我在输入字段中输入任何内容，例如“hello”和i scroll，“hello”将随机移动到不同的项。
示例: List，共50行。我在第一行的文本字段中输入“hello”，然后向下滚动，这样第一行就看不见了。“hello”出现在第12行的文本字段中。我回滚到第1行，文本字段为空。我向下滚动到第12行，它是空的，但“hello”现在显示在第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;
}
}
}我得到了与普通原生脚本ListView相同的结果，所以我不认为这是一个错误。
我怎样才能纠正这个错误呢？
我使用的是Angular和Typescript，到目前为止只在Android上测试：
tns --版本: 3.1.2
跨平台模块版本: 3.1.0
回答 2
Stack Overflow用户
发布于 2017-08-16 21:23:43
所以我最终在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)”
Stack Overflow用户
发布于 2017-09-11 19:18:23
这是我发现的一个更简单的答案，我们可以使用Nativescript双向绑定得到相同的结果：
我们删除这个函数：(returnPress)="onReturn($event)“，这个文本=‘item.Quantity’，替换为(ngModel)="productsi.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));
}
}
}https://stackoverflow.com/questions/45595279
复制相似问题
腾讯云开发者
