离子可扩展/手风琴列表答案

【问题标题】：Ionic Expandable/ Accordion List离子可扩展/手风琴列表
【发布时间】：2020-04-13 05:23:32
【问题描述】：

请帮助我，我想在 ionic 5 中创建一个简单的手风琴我按照教程博客链接创建了 ionic 手风琴列表，该链接使用小部件创建手风琴下拉列表，下面是该博客的链接...
https://masteringionic.com/blog/2019-01-27-creating-a-simple-accordion-widget-in-ionic-4/

问题是没有出现列表，也没有显示错误

这是我的 .html 文件

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Accordion
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <app-accordion 
     *ngFor="let technology of technologies" 
     name="{{ technology.name }}" 
     description="{{ technology.description }}"
     (change)="captureName($event)">
  </app-accordion>
</ion-content>

mi-accordion.component.html

<h2 (click)="toggleAccordion()">
  {{ name }}
   <span *ngIf="isMenuOpen">&#9650;</span>
   <span *ngIf="!isMenuOpen">&#9660;</span>
</h2>
<div [ngClass]="this.isMenuOpen ? 'active' : 'inactive'">
   <p>{{ description }}</p>
   <ion-button 
      type="button" 
      color="primary" 
      fill="solid" 
      size="default" 
      (click)="broadcastName(name)">Console log me!</ion-button>
</div>

如果我遗漏了什么，有人可以帮忙吗？如果您需要其他代码，请告诉我

【问题讨论】：

标签： angular ionic-framework ionic5

【解决方案1】：

我已经通过将 mi-accordion.component.html 更改为

解决了这个问题

  <app-mi-accordion 
     *ngFor="let technology of technologies" 
     name="{{ technology.name }}" 
     description="{{ technology.description }}"
     (change)="captureName($event)">
  </app-mi-accordion>

【讨论】：

【解决方案2】：

我的手风琴是这样的：

在 html 中，我使用 ngFor "any other component will work" 创建了卡片，我将 css 类 "myHiddenTec" 添加到所有最初应该隐藏的子元素中，在本例中为 "ion-card-content"。另外，我添加了两个图标，第二个最初是隐藏的，一个调用“iconWork(p.id+'')”，第二个调用“revIconWork(p.id+'')”，我传递了我的对象的任何唯一键“ post.id”。我的技巧是向元素 id 添加常量字符串，例如“p.id+'content'”或“p.id+'icon'”等。

html

<ng-container *ngFor="let p of posts">
    <ion-card>
        <ion-card-header>
        </ion-card-header>

        <ion-card-content [id]="p.id+'content'" class="myHiddenTec">
        </ion-card-content>

        <ion-icon [id]="p.id" color="primary" name="add-outline"
            (click)="iconWork(p.id+'' )"></ion-icon>
            
        <ion-icon [id]="p.id+'icon2'"  class="myHiddenTec" name="remove-outline"
            (click)="revIconWork(p.id+'')"></ion-icon>
    </ion-card>
</ng-container>

css

.myHiddenTec{
    display: none;
}

ang.ts

iconWork(id: string ){
    let icon1 = document.getElementById(id);
    icon1.style.display = "none";

    let icon2 = document.getElementById(id+'icon2');
    icon2.style.display = "block";
    
    let content = document.getElementById(id+'content');
    content.style.display = "block";
    
  }

  revIconWork(id: string ){
    let icon1 = document.getElementById(id);
    icon1.style.display = "block";

    let icon2 = document.getElementById(id+'icon2');
    icon2.style.display = "none";

    let content = document.getElementById(id+'content');
    content.style.display = "none";
  }

【讨论】：