在离子可选上显示分隔线

Question

我在我的 ionic 4 项目中使用 eakoriakin/ionic-selectable。

我有一个匹配这个模型的列表团队：

export class Team {
    id: string;
    name: string;
    description: string;
}

我使用这样的可选元素：

<ionic-selectable
      closeButtonText="Fermez"
      closeButtonSlot="end"
      [items]="allTeams"
      itemValueField="id"
      itemTextField="name"
      [canSearch]="true"
      (onChange)="teamChanged($event)">
</ionic-selectable>

可以添加一些 divider 来分隔一些 team 我该怎么做？

Answer 1

wiki 中解释了项目分组功能。

您需要向数据添加分组属性，例如 teamGroup:

export class Team {
    id: string;
    name: string;
    description: string;
    teamGroupId: number;
    teamGroupName: string;
}

那么你可以这样使用它：

<ionic-selectable
      closeButtonText="Fermez"
      closeButtonSlot="end"
      [items]="allTeams"
      itemValueField="id"
      itemTextField="name"
      [canSearch]="true"
      groupValueField="teamGroupId"
      groupTextField="teamGroupName"
      (onChange)="teamChanged($event)">
        <ng-template ionicSelectableGroupTemplate let-group="group">
          {{group.text}}
        </ng-template>
</ionic-selectable>

您可以在各个属性文档中查看更多相关信息：

在离子可选上显示分隔线

Show divider on ionic-selectable

ionic-framework

ionic4