Ionic 2列出全宽分频器

Question

我目前在Ionic 2应用程序上有一个列表，并且分隔符仅在最后一个元素上为全宽。 结果如下：

我希望所有元素都具有全宽边框。无法在文档中找到有关此内容的任何内容..请提前感谢您的帮助！

编辑： 这是我的代码：

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

Answer 1

您可以使用no-lines属性（为了隐藏没有全宽的边框）来执行此操作，并添加自定义样式规则以在这些项目中添加边框。请看this plunker。

所以在你看来：

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

然后在.scss文件中：

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

Answer 2

我在离子4上遇到了问题，下面是我的答案。

HTML

p[len(p):len(p]

.scss

In [1]: p = [1, 2, 3, 4]

In [2]: p[2:2] = [42, 42, 42]

In [3]: p
Out[3]: [1, 2, 42, 42, 42, 3, 4]

请确保使用 <ion-list lines="none"> <ion-item class="bottom-border" *ngFor=".."> <ion-label>Pokémon Yellow</ion-label> </ion-item> </ion-list> 删除现有行