ionic用ngIf实现卡片展开和关闭

码农老郭

于 2019-03-31 20:31:12 发布

阅读量877

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/G165945348/article/details/88934820

该博客介绍了一个使用Angular框架实现的课程列表展示组件。每个课程条目都可以展开显示详细的教学大纲及相应的操作按钮，如发布、编辑和删除等。通过点击课程名称可以切换显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <ion-card *ngFor="let item of levelOrder,let i=index">
    <ion-item (click)="isShowHandler(i,item.courseId)">
      <ion-label>{{item.courseName}}</ion-label>
      <ion-icon slot="end" name="ios-arrow-down" *ngIf="isShow =='show'+i"></ion-icon>
      <ion-icon slot="end" name="ios-arrow-forward" *ngIf="isShow !='show'+i"></ion-icon>
    </ion-item>

    <!--展开-->
    <ion-list *ngIf="isShow=='show'+i">
      <ion-item class="program" *ngFor="let pItem of program">
        <ion-label>
          <label #uName class="name" (click)="question()">{{pItem.name}}</label>
        </ion-label>
        <ion-button *ngIf="pItem.name != '此课程暂无模板'" color="primary" (click)="releasedRoute(pItem.id)">发布</ion-button>
        <ion-button *ngIf="pItem.name != '此课程暂无模板'" color="success" (click) = "editPractice(pItem.id)">编辑</ion-button>
        <ion-button *ngIf="pItem.name != '此课程暂无模板'" color="danger" (click)="deletePractice(pItem.id)">删除</ion-button>
      </ion-item>
    </ion-list>
  </ion-card>