当我选择第一个父子数组时,它会选择所有其他父子数组。我知道这是因为索引 0 对每个人来说都是一样的。我如何从 child 中选择特定的一个并突出显示它。
我尝试比较父级和子级的索引,但即使如此,我也无法选择特定的子级数组。
home.html
<style>
.highlight {
background-color:#777;
}
</style>
<ion-item *ngFor="let date of testList">
{{date.date}}
<ion-item *ngFor="let item of date.item; let i= index" [class.highlight]="i == selectedOne" (tap)="onSelected(i)">
{{item.name}}
</ion-item>
</ion-item>
home.ts
public testList: any[] = [
{
date: 'test1',
item: [ {
name:'tony',
id:23
},
{
name:'shawn',
id:12
},
{
name:'rancho',
id:33
}
]
},
{
date: 'test2',
item: [ {
name:'Monty',
id:345
},
{
name:'Bob',
id:321
},
{
name:'Dexter',
id:324
}
]
},
{
date: 'test3',
item: [ {
name:'Trillo',
id:234
},
{
name:'Stenly',
id:12
},
{
name:'Destro',
id:123
}
]
}
]
public selectedOne: boolean
onSelected(index) {
if (this.selectedOne != index) {
this.selectedOne = index;
} else {
this.selectedOne = null;
}
}
最佳答案
我将首先向列表中显示的每个项目添加一个选定的属性,您可以使用以下所有方法来完成此操作,尽管我会将其移至 ngOnInit()
。
constructor(public navCtrl: NavController) {
this.testList.forEach(data => data.item.forEach(each =>
{
each.selected = false;
})
)
}
这意味着您可以针对每个对象进行存储,无论它是否已被选择。然后将您的 html 修改为如下所示。更改是,单击时您会传递项目及其父项而不是索引,并且 [class.highlight]
检查 selected
是否为 true
或假
。
<ion-content padding>
<ion-item *ngFor="let date of testList">
{{date.date}}
<ion-item *ngFor="let item of date.item; let i= index"
[class.highlight]="item.selected" (tap)="onSelected(item, date)">
{{item.name}}
</ion-item>
</ion-item>
</ion-content>
并对单击时调用的函数进行轻微更改,如果 selected
为 false
,则将其设置为 true,反之亦然。
编辑
定义一个清除函数来清除所有内容,与迭代到所有内容都为 false 的第一位相同。
onSelected(item, parent)
{
this.testList.forEach(data => data.item.forEach(each =>
{ each.selected = false; }));
item.selected ? item.selected = false : item.selected = true;
}
关于javascript - 如何从子数组中选择特定的一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55993513/