Question

当文本框聚焦时，我试图在页面上显示一个元素。

HTML

<ion-header>
  <ion-navbar color="primary">
  </ion-navbar>
  <ion-toolbar>
      <ion-row >
        <ion-col>
          <ion-searchbar placeholder="Search Account Number" [(ngModel)]="searchInput"> </ion-searchbar>
        </ion-col>
        <ion-col col-2>
          <ion-icon (click)="searchCustomer()" ion-item name="arrow-forward"></ion-icon>
        </ion-col>
      </ion-row>
      <p align="right" *ngIf="searchInput.length > 0">
        <span style="color:gray;padding:5px">Switch to Advance Search</span>
      </p>
    </ion-toolbar>
</ion-header>

JavaScript

export class AppHomePage {

  searchInput: any;
  searchResults: any;

  constructor(public navCtrl: NavController,
              public loadingCtrl: LoadingController,
              public toastCtrl: ToastController,
              public http: Http,
              public alertCtrl: AlertController) {

              this.searchResults = [];
  }
}

使用我的脚本在页面加载时出现此错误：

无法读取未定义的属性“ length”

Answer 1

选项1：如果您尚未初始化seachInput = ''，请先进行初始化。

选项2：用户(input)事件，当用户在文本框中输入任何数据时获得长度。

<ion-searchbar placeholder="Search Account Number" (input)="getSeachData($event)" [(ngModel)]="searchInput"> </ion-searchbar>

在您的.ts文件中。

// First set variable above constructor. 
searchFlag : boolen = false;
getSeachData(event){
   this.searchFlag = true ? event.target.value.length > 0 : false;
}

在您的HTML文件中。

<p align="right" *ngIf="searchFlag">
    <span style="color:gray;padding:5px">Switch to Advance Search</span>
</p>

通过这种方式，您可以做自己想做的事情。但是我仍然建议使用first选项。如果效果不佳，请使用second选项。

希望最好。

Answer 2

您可以使用ionFocus事件来实现所需的目标。

HTML

<ion-header>
  <ion-navbar color="primary">
  </ion-navbar>
  <ion-toolbar>
      <ion-row >
        <ion-col>
          <ion-searchbar placeholder="Search Account Number" [(ngModel)]="searchInput"> </ion-searchbar>
        </ion-col>
        <ion-col col-2>
          <ion-icon (click)="searchCustomer()" (ionFocus)="showSwitchAdvanceSearch()" ion-item name="arrow-forward"></ion-icon>
        </ion-col>
      </ion-row>
      <p align="right" *ngIf="showSwitchAdvanceSearch">
        <span style="color:gray;padding:5px">Switch to Advance Search</span>
      </p>
    </ion-toolbar>
</ion-header>

打字稿

export class AppHomePage {

  searchInput: any;
  searchResults: any;
  showSwitchAdvanceSearch = false;

  constructor(public navCtrl: NavController,
              public loadingCtrl: LoadingController,
              public toastCtrl: ToastController,
              public http: Http,
              public alertCtrl: AlertController) {

              this.searchResults = [];
  }

  showSwitchAdvanceSearch() {
    this.displaySwitchAdvanceSearch = true;
  }
}

angular4-仅在texbox聚焦时显示元素

2 个答案: