angular - divisor de lista de ancho completo en Ionic 2

Actualmente tengo una lista en una aplicación Ionic 2, y el divisor tiene ancho completo solo en el último elemento. Aquí está el resultado:

Me gustaría que todos los elementos tuvieran un borde de ancho completo. No encontré nada sobre esto en la documentación. ¡Gracias de antemano por tu ayuda!

EDITAR: Aquí está mi código:

<ion-list no-padding="">
    <ion-item *ngFor='let like of likes' (click)="goTo(like.qrcode)" text-wrap>
        <ion-thumbnail item-left>
            <img class="item item-thumbnail-left" [src]="like.logo">
        </ion-thumbnail>
        <h2>{{like.name}}</h2>
        <h3 class="establishment">{{like.type}}<br /></h3>
        <p class="establishment">{{like.city}}<br /></p>
        <!--<button ion-button clear item-right>View</button>-->
    </ion-item>
</ion-list>

Respuesta #1

Puedes hacer eso usando el atributo no-lines (para ocultar los bordes sin el ancho completo) y agregar una regla de estilo personalizada para añadir el borde en esos elementos. Por favor, echa un vistazo a este plunker.

Entonces, en tu opinión:

  <ion-list>
      <ion-item no-lines class="bottom-border" *ngFor="..">
          ...
      </ion-item>
  </ion-list>

Y luego en el archivo .scss:

.item[no-lines].bottom-border { 
    border-bottom: 1px solid grey; 
}

Respuesta #2

Me enfrenté a ello en Ionic 4 y la siguiente es mi respuesta.

Html

 <ion-list lines="none">
    <ion-item class="bottom-border" *ngFor="..">
      <ion-label>Pokémon Yellow</ion-label>
    </ion-item>
  </ion-list>

.scss

.bottom-border{
  border-bottom: 1px solid #e8e8e8;
}

Por favor, asegúrese de usar lines="none" para eliminar la línea existente