Ionic2 button click text box toggle

问题

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 file

<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 File

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

}

回答1:

Change your ion-input to this:

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

or hide== true. Which ever works for you.

then to your .scss, add:

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

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.

来源：https://stackoverflow.com/questions/46149701/ionic2-button-click-text-box-toggle

标签

ionic3