删除<ion-list>

时间:2017-09-28 10:36:53

标签: angular ionic-framework

使用<ion-list>时,如何设置最后一项不显示分隔符?

我有一个列表,其中有2个*ng-For通过2个数组。第一个数组将其他数组作为元素。

第一个数组元素之间的分隔符正常工作。但是,当显示第二个数组时,最后一个项目也有一个分隔符。

设置no-lines属性会删除项目之间的所有分隔符,但我只想删除最后一个分隔符。

当前显示的最后一项如何:

enter image description here

这是理想的结果:

enter image description here

我已尝试应用此样式规则:

.md ion-list > .item:last-child, 
.md ion-list > .item-wrapper:last-child .item,
.wp ion-list > .item:last-child, 
.wp ion-list > .item-wrapper:last-child .item,
.ios ion-list > .item:last-child, 
.ios ion-list > .item-wrapper:last-child .item {
    border-bottom: none;
}

修改

这是我目前的代码:

list.html

 <ion-list>
    <ion-item *ngFor="let obj of TestObject.charListArray">
      {{obj.variable}}

      <ion-item *ngFor="let person of obj.contactArray">
        {{person.lastname}}, {{person.firstname}} <br> 
        {{person.email}} <br>
        {{person.company}}
      </ion-item>

    </ion-item>
   </ion-list>

测试对象类:

import { charSection } from '../home/charSection';
import { compactContact } from '../home/compactContact';

export class charList {
  charListArray: Array<charSection>;
  alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  chars = this.alphabet.split("");

  //Generates 26 charSection-Objects in this array
  constructor() {
    this.charListArray = [];
    for (let i in this.chars) {
      this.charListArray.push(new charSection(this.chars[i]));
    }
  }

CharSection级:

import { compactContact } from '../home/compactContact';

export class charSection {
  contactArray: Array<compactContact>;

  constructor(public char: string) {
    this.contactArray = [];
  }

1 个答案:

答案 0 :(得分:0)

您非常接近。这对我有用:

ion-item:last-child {
    --border-width: 0;
    --border-color: transparent;
}