离子可扩展/手风琴列表

Question

请帮助我，我想在 ionic 5 中创建一个简单的手风琴我按照教程博客 link 创建了离子手风琴列表，该博客使用小部件创建手风琴下拉菜单，下面是该博客的 link…
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>

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

Answer 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>

Answer 2

我的手风琴是这样的：

在 html 中，我使用 ngFor 创建了卡片“任何其他组件都可以工作”，并且我将 css class“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";
  }

离子可扩展/手风琴列表

Ionic Expandable/ Accordion List

ionic-framework

angular

ionic5