离子段落是离子项目按钮中的单行

【问题标题】：ionic paragraph is single line in ion-item button离子段落是离子项目按钮中的单行
【发布时间】：2018-09-09 15:49:54
【问题描述】：

我得到了以下 html：

<button ion-item (click)="doSome()" style="margin-left: 72px; display: block; padding-left: 0" >
    <div padding-left style="display: block">
        <h6>Function</h6>
        <p>{{user.function}} </p>

        <h6 padding-top>About</h6>
        <p>{{user.about}}</p>

        <h6 padding-top>Task</h6>
        <p>{{user.task}}</p>
    </div>
</button>

结果如下：

我发现ion-item 指令导致了这种情况。我该如何解决这个问题？

EDIT1：更多信息

我正在寻找的结果是这样的：

这是手风琴视图。基本上它是一个列表，每个项目都有手风琴组件。在手风琴中，我有上面的 html。因为我希望手风琴中的项目可以点击并产生涟漪效果，所以它必须是<button ion-item></button>

手风琴：

export class AccordionComponent {

  @Input('expanded') expanded = false;

  constructor() {

  }

  toggle(){
    this.expanded = !this.expanded;
  }
}

简单的手风琴html：

<div *ngIf="expanded" @ngIfAnimation>
  <ng-content></ng-content>
</div>

EDIT2：
任何具有可扩展列表项的解决方案都可以。 listitem 和 expandlistitem 都需要涟漪效应。

【问题讨论】：

• How to wordwrap a long string in ion-item的可能重复
• 你需要使用

  吗？ ion item 可以提供漂亮的外观和许多好的功能，它还提供 text-wrap 来解决您的问题
• @denmch 我也发现了。不幸的是，它不能解决我的问题。可能是因为我正在使用按钮。
• @Utpaul 我认为我不需要 div。不过，我需要按钮，所以我不能使用 ion-item 组件。
• @RobinDijkhof 如果你更新你想要的视图我会解决这个问题...... ??