Question

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

所以我有正常的项目（关于nativecsript.org - Sample Grocery app）。我在Android 6上测试它 - 设备LG Nexus 5（不是模拟器）。

在列表服务中是从API获取的数据，然后在列表组件中创建数组 - 来自获取数据的itemsList。这是View代码（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 Core绑定：

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

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

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

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

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

至于在Android中隐藏/显示键盘问题，您可以参考Groceries应用程序中使用的示例代码。这些方法使用本机技术来控制键盘的外观。

  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>

我希望它对某人有所帮助。如果要创建滚动视图，请将此代码包装为＆lt; ScrollView＆gt;元件。

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

2 个答案: