如何在 NativeScript 中将 TextField 添加到 ListView？

Question

ListView 中的 TextField 有问题。每次当我点击 TextField 时，键盘都会显示并自动隐藏。我真的不知道为什么键盘隐藏..

所以我有正常的项目（在方式 nativecsript.org - 示例杂货应用程序中）。我正在 Android 6 - 设备 LG Nexus 5（不是模拟器）上测试它。

在列表服务中是从 API 获取的数据，然后在列表组件中创建数组 - itemsList 来自获取的数据。这是查看代码 (list.html):

<ListView [items]="itemsList" class="small-spacing" orientation="vertical" rowHeight="auto">
    <template let-item="item">
            <TextField hint="{{item.name}}" ></TextField>
    </template>
  </ListView>

非常感谢您的回答。

Answer 1

这是 NativeScript 核心绑定：

<TextField hint="{{item.name}}" ></TextField>

你需要的是 Angular-2 绑定语法（比如当你初始化 [items] 时）

<TextField [hint]="item.name" ></TextField>

如果您需要与输入值进行双向绑定，那么您可以对文本使用 ngModel 属性

<TextField [hint]="item.name" [(ngModel)]="myTextfieldData"></TextField>

至于hiding/showingAndroid中的键盘问题，您可以参考杂货应用程序中使用的示例代码。这些方法是使用原生技术来控制键盘外观。

  handleAndroidFocus(textField, container) {
    if (container.android) {
      container.android.setFocusableInTouchMode(true);
      container.android.setFocusable(true);
      textField.android.clearFocus();
    }
  }

整个例子可以找到here

Answer 2

我终于做到了。我不得不将代码从 ListView 更改为 angular *ngFor 方法，如下所示：

<StackLayout *ngFor="let item of itemsList">
   <TextField [hint]="item.name" [(ngModel)]="myTextfieldData"></TextField>
</StackLayout>

希望对大家有所帮助。如果要创建滚动视图，请将此代码包装到元素中。

如何在 NativeScript 中将 TextField 添加到 ListView？

How to add TextField to ListView in NativeScript?

listview

nativescript

angular