Двойная нижняя строка первого элемента списка в Ioni c 5

Question

Я создаю список в Ioni c 5, повторяя элементы массива. Но первый элемент в списке продолжает получать 2 нижних строки при рендеринге Android. Это мой код:

<ion-list class="ion-padding" inset>
    <ion-item *ngFor="let recurrent of myRecentRecurrents" [routerLink]="['/tabs/recorrente', recurrent.id]">
        <p>{{ recurrent.plan.amount }}</p>
    </ion-item>
</ion-list>

Это ожидаемый результат:

Но вот что я получаю:

Кто-нибудь знает, почему я получаю этот результат?

https://codepen.io/mfragale/pen/YzyNrvq

Answer 1

Удалите атрибут inset из ion-list и добавьте lines="inset" к каждому ion-item, то есть

<ion-list class="ion-padding">
    <ion-item *ngFor="..." lines="inset">
        ...
    </ion-item>
</ion-list>

См. Ioni c документы для получения дополнительной информации. .