Ionic2按钮单击文本框切换 [英] Ionic2 button click text box toggle

问题描述

我是离子初学者。我想在按钮点击时切换文本框（离子输入）。我发送以下代码不起作用。请提出一些建议来解决它.openTheTextBox函数将hide boolean变量更改为相反的。但每次离子输入都是不可见的状态。

I am beginner in ionic. I wants to toggle textbox(ion-input) on button click. I am sending the following code it is not working. Please suggest some suggestion to solve it.The openTheTextBox function change the hide boolean variable into its opposite. But every time the ion-input are invisible state.

HTML文件

<ion-header>
 <ion-navbar>
 <button ion-button menuToggle>
 <ion-icon name="menu"></ion-icon>
 </button>
 <ion-title>Home</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <h3>Ionic Menu Starter</h3>
 <p>
    If you get lost, the <a 
    href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
 </p>

 <button ion-button secondary menuToggle round>Toggle Menu</button>

 <button ion-button color="secondary" round full  (click)="openTheTextBox()" >Add </button>

 <ion-input type="text" value="asdasdasd" *ngIf="hide"></ion-input>

 <ion-list>
   <button ion-item *ngFor="let item of DataArray" >
   {{ item.user_name }}
  </button>  
 </ion-list>
 </ion-content>

TS档案

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { MyDataProvider } from '../../providers/my-data/my-data';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

public DataArray: Array<Object>;
public hide: boolean = true;
constructor(public navCtrl: 
NavController,myDataProvider:MyDataProvider) {
alert("Home Page");
type Product = { name: string; user_name: string; location: string };
let passDataObject =  { name: "jit", user_name: "j.comp", location: 
"kolkata" };
// myDataProvider.saveTablicaToSqlite(passDataObject);
let jitSaveData = myDataProvider.getTablicaMyOfflineData().then(
(result)=>{
this.DataArray = <Array<Object>> result;
alert("Length of the Array is "+this.DataArray.length)
}, (error) => {
console.log("ERROR: ", error);
});

}

openTheTextBox()
{
 alert("openTheTextBox");
 this.hide = !this.hide;
}

}

推荐答案

将离子输入更改为：

<ion-input type="text" value="asdasdasd"  [class.hidden]="hide"></ion-input>

或 hide == true 。哪个适合你。

然后到你的 .scss ，添加：

page-home {
    ion-input.hidden {
        display: none;
    }
}

重点是你有何时的条件类应用名为hidden的类。 ngIf 是如果html要渲染的条件，所以如果由于条件而最初没有渲染标记，那么你将不再渲染它。所以基本上，让它在第一个位置渲染，然后用你可以切换的布尔属性隐藏它。

The point is you have a conditional class for when to apply the class named "hidden". The ngIf is a condition for "if the html shoud be rendered", so if it happens that the tag was not rendered initially because of the condition, then you won't have it rendered anymore. So basically, have it rendered at the first place and just hide it with your boolean property that can be toggled.

这篇关于Ionic2按钮单击文本框切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！