离子2按钮单击文本框切换

Question

我是Ionic的初学者。我要在单击按钮时切换textbox(ion-input)。我正在发送以下代码，它无法正常工作。请提出一些解决方案。 openTheTextBox函数将hide布尔变量更改为相反的值。但是每次ion-input都是不可见状态。

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

}

Answer 1

将离子输入更改为：

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

或hide== true。哪个对您有用。

然后添加到您的.scss中，添加：

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

关键是您有一个条件类，用于何时应用名为“隐藏”的类。 ngIf是“如果应呈现html的条件”的条件，因此，如果碰巧由于该条件最初未呈现该标记，则将不再呈现它。因此，基本上，首先将其呈现，然后使用可切换的布尔属性将其隐藏。