0

我正在尝试在每一行/单元格中使用带有 TextField 和 TextView 的 RadListView 构建一个列表。列表显示正确，但是当列表足够长可以滚动并且我在输入字段中输入任何内容（例如“hello”并且我滚动时，“hello”将随机移动到不同的项目。

示例：包含 50 行的列表。我在第 1 行的文本字段中输入“hello”。我向下滚动，使第 1 行不再可见。“你好”出现在第 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 --版本：3.1.2

跨平台模块版本：3.1.0

4

2 回答 2

0

这是我找到的一个更简单的答案，我们可以使用 Nativescript 2 方式绑定得到相同的答案：

我们删除了这个函数： (returnPress)="onReturn($event)" 和 this [text]='item.quantity' 并替换为 [(ngModel)]="products[i].quantity"

现在，在 TextField 中所做的任何更改都将自动更新对象，并且列表视图将在需要再次呈现元素时使用新值。

这是代码：

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

}
于 2017-09-11T11:18:22.653 回答
0

所以我终于在 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)"

于 2017-08-16T13:23:43.183 回答