NativeScript - 使用按钮将标签更改为 TextView/TextField答案

【问题标题】：NativeScript - Change Label into TextView/TextField with a ButtonNativeScript - 使用按钮将标签更改为 TextView/TextField
【发布时间】：2020-07-17 18:36:26
【问题描述】：

我正在学习使用 NativeScript (Angular 2) 制作应用程序。在我的项目页面中，我想要一个按钮，以便当我按下它时，我可以将 Label 更改为 TextView/TextField 以编辑项目的信息。

我知道我可以在 TextView 中使用 editable，但我仍然想知道让按钮具有该功能是否可行。谢谢！！

item.component.html：

<StackLayout>
    <Label class="h3" text="Name: {{ item.get_name() }}" textWrap="true">
    </Label>
    <Label class="h3" text="Credit: {{ item.get_credit() }}"></Label>
    <Button class="btn" text="Edit" (tap)="change()"></Button>
</StackLayout>

<!-- After pressing the button -->
<StackLayout>
    <TextView class="h3" [text]="item.get_name()" textWrap="true">
    </TextView>
    <TextView class="h3" [text]="item.get_credit()"></TextView>
    <Button class="btn" text="Save" (tap)="change()"></Button>
</StackLayout>

【问题讨论】：

对于这样的事情，我通常只是改变控件的可见性。例如，您可以有一个覆盖标签的文本字段（可能需要一个 GridLayout 来执行此操作）。点击按钮将隐藏标签并显示文本字段，并且两者都可以绑定到同一个变量。

标签： nativescript

【解决方案1】：

这可以通过多种方式完成，但一种常见的方式是更改控件的可见性并将其绑定到后面代码中的变量/属性。

在您的组件 html 中：

然后在你的组件 ts 或代码隐藏中你可以在 change 方法中处理它：

class MyComponentSample {
   isLabelMode: boolean = true; // Set to true if you want label to show by default or false if TextView as default

   change() {
      this.isLabelMode = !isLabelMode; // Basically you are toggling the mode here.
   }
}

【讨论】：