单击离子卡时如何调用离子选择

Question

我正在离子网络应用程序中设置一个页面，当点击离子卡时应该出现一个页面。我的 ion-select 是纯 html。

尝试添加一个方法，但是如何在那个 .ts 文件中添加这个 html 以便我可以做 (click)="doSomething()"

<ion-card>
   <ion-card-header> Header </ion-card-header>
</ion-card>


<ion-list>
 <ion-item>
  <ion-label>Hair color</ion-label>
  <ion-select value="brown" okText="OK" cancelText="Cancel">
    <ion-select-option> Black </ion-select-option>                                 
    <ion-select-option> Brown </ion-select-option>
 </ion-item>
</ion-list>

我希望在点击离子卡时显示离子列表

Answer 1

您可以通过将<ion-card-header> 与点击事件绑定，然后在<ion-list> 上添加*ngIf 结构指令来实现此目的

<ion-card>
   <ion-card-header (click)="onClick()"> Header </ion-card-header>
</ion-card>


<ion-list *ngIf="displayList">
 <ion-item>
  <ion-label>Hair color</ion-label>
  <ion-select value="brown" okText="OK" cancelText="Cancel">
    <ion-select-option> Black </ion-select-option>                                 
    <ion-select-option> Brown </ion-select-option>
 </ion-item>
</ion-list>

在您的 component.ts 上，onClick 会将 true 分配给 displayList，这将在单击标题时显示 ion-list。

displayList: boolean = false;

onClick() {
  this.displayList = true;
}

我已经在here 上创建了一个演示。