Question

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

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

重点是你有一个条件类，什么时候应用名为＆＃34; hidden＆＃34;的类。 ngIf 是＆＃34的条件;如果html应该呈现＆＃34;，那么如果由于条件而发生标签最初没有呈现，那么你就赢了＃t让它再渲染。所以基本上，让它首先渲染，然后用你可以切换的布尔属性隐藏它。

Ionic2按钮单击文本框切换

1 个答案: