Question

我正在离子Web应用程序中设置一个页面，单击离子卡时应在其中显示a。我的选择离子是纯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>与click事件绑定，然后在*ngIf上添加<ion-list>结构化指令来实现这一目标

<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上进行了演示。

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

1 个答案: