使用<ion-list>
时,如何设置最后一项不显示分隔符?
我有一个列表,其中有2个*ng-For
通过2个数组。第一个数组将其他数组作为元素。
第一个数组元素之间的分隔符正常工作。但是,当显示第二个数组时,最后一个项目也有一个分隔符。
设置no-lines
属性会删除项目之间的所有分隔符,但我只想删除最后一个分隔符。
当前显示的最后一项如何:
这是理想的结果:
我已尝试应用此样式规则:
.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 = [];
}
答案 0 :(得分:0)
您非常接近。这对我有用:
ion-item:last-child {
--border-width: 0;
--border-color: transparent;
}