Question

当文本框中的字符可见时，我试图隐藏页面的某些内容，而当文本框中的所有字符都出现时，将内容带回

HTML

 <ion-toolbar >
        <ion-searchbar placeholder="Search" (ionFocus)="callSearch($event)"></ion-searchbar >
      </ion-toolbar>
  <span *ngIf="showDefault">
<ion-list>
    <ion-list-header>
      Suggested
    </ion-list-header>
    <ion-item>
        <ion-avatar item-start>
          <img src="">
        </ion-avatar>
      <h2>Fullname</h2>
      <p></p>
    </ion-item>
  </ion-list>
  </span>

JS

  showDefault: any;
  constructor(public navCtrl: NavController, 
              public toastCtrl: ToastController,
              public alertCtrl: AlertController,
              public http: Http,
              public global: GlobalAPI) {

                this.showDefault = true;
  }

  ionViewDidLoad() {
  }

  callSearch($event){
    this.showDefault = false;
  }

Answer 1

尝试：

HTML：

<ion-toolbar>
  <ion-searchbar placeholder="Search" (ionInput)="callSearch($event, searchInput)" [(ngModel)]="searchInput"></ion-searchbar>
</ion-toolbar>
<span *ngIf="searchInput.length == 0">
  <ion-list>
    <ion-list-header>
      Suggested
    </ion-list-header>
    <ion-item>
      <ion-avatar item-start>
        <img src="">
      </ion-avatar>
      <h2>Fullname</h2>
      <p></p>
    </ion-item>
  </ion-list>
</span>

TS：

showDefault: any;
searchInput: any = '';
constructor(public navCtrl: NavController, 
            public toastCtrl: ToastController,
            public alertCtrl: AlertController,
            public http: Http,
            public global: GlobalAPI) {

              this.showDefault = true;
}

ionViewDidLoad() {
}

callSearch($event, value){
  if(this.searchInput){
         this.showDefault = false;
  }
}

当字符在文本框中时隐藏内容

1 个答案: