ionic3 - 單擊外部 ion-select div 標簽時觸發 ion-select

Question

我們在頁面中有一個搜索欄和下拉框。 當我們點擊搜索欄時，下拉菜單被調用。 任何人都知道如何阻止它。

<div>
    <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredData()"></ion-searchbar>
  </div>
  <br/>
  <div>
     <ion-select [(ngModel)]="selectedCityTag" placeholder="Filter" multiple="true" (ionChange)="onSelectChange()">
      <ion-option selected *ngFor="let city of cityList">{{city}}</ion-option>
    </ion-select>
  </div>

當我們點擊搜索文本框時，下拉菜單被調用。 不知道如何解決。

謝謝AK

Answer 1

雖然文檔中沒有提到，但需要將ion-select放在ion-item中，所以這樣做可以解決您的問題。

用ion-item而不是div包裹你的ion-select 。

另外，請注意，為動態生成ion-option設置selected屬性將選擇ion-select -select 的所有選項。 你可能想在那里放一些條件。

<div>
  <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredData()"></ion-searchbar>
</div>
<br/>
<ion-item>
  <ion-select [(ngModel)]="selectedCityTag" placeholder="Filter" multiple="true" (ionChange)="onSelectChange()">
    <ion-option selected *ngFor="let city of cityList">{{city}}</ion-option>
  </ion-select>
</ion-item>

Answer 2

ion-select 生成的 html 會產生一個按鈕類型的子項。

我將寬度和高度設置為 0，比如

.item-cover {
  height: 0;
  width: 0;
}