如何 select 从子数组中指定一个
how to select specific one from child array
当我 selecting 第一个父子数组时,它 selecting 每个其他父子数组。我知道这是因为索引 0 对每个人都保持不变。我怎样才能 select 指定一个来自儿童的并突出显示它。
Link:
stackblitz playground
我已经尝试比较父项和子项的索引,但即使这样我也无法 select 指定子项数组之一。
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;
}
}
我想select具体一个并突出显示它。
我将从向列表中显示的每个项目添加一个选定属性开始,您可以使用以下所有内容来执行此操作,尽管我会将其移至 ngOnInit()
。
constructor(public navCtrl: NavController) {
this.testList.forEach(data => data.item.forEach(each =>
{
each.selected = false;
})
)
}
这意味着您可以根据每个对象存储它是否已被选中。然后将您的 html 修改为如下所示。更改是,单击时您将传递项目及其父项而不是索引,并且 [class.highlight]
检查 selected
是否为 true
或 false
。
<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>
并对单击时调用的函数稍作改动,如果它出现在 false
中,这将设置 selected
为真,反之。
编辑
定义一个clear函数来清除所有,和第一个bit迭代到all为false一样。
onSelected(item, parent)
{
this.testList.forEach(data => data.item.forEach(each =>
{ each.selected = false; }));
item.selected ? item.selected = false : item.selected = true;
}
将 selectedOne 变量更改为 Object
public selectedOne = {id: 12, name: 'Stenly'};
并在循环中更新条件 [class.highlight]="(item.id == selectedOne.id && item.name == selectedOne.name)"
<ion-item *ngFor="let item of date.item; let i= index" [class.highlight]="(item.id == selectedOne.id && item.name == selectedOne.name)" (tap)="onSelected(i)">
{{item.name}}
</ion-item>
CHECK WORKING STACKBLITZ
您的 home.html
如下所示:~
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<style>
.highlight {
background-color: #777;
}
</style>
<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.id == selectedOne" (tap)="onSelected(item)">
{{item.name}}
</ion-item>
</ion-item>
</ion-content>
您的 home.ts
onSelected 方法如下所示:~
onSelected(item) {
this.selectedOne = item.id;
}
当我 selecting 第一个父子数组时,它 selecting 每个其他父子数组。我知道这是因为索引 0 对每个人都保持不变。我怎样才能 select 指定一个来自儿童的并突出显示它。
Link: stackblitz playground
我已经尝试比较父项和子项的索引,但即使这样我也无法 select 指定子项数组之一。
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;
}
}
我想select具体一个并突出显示它。
我将从向列表中显示的每个项目添加一个选定属性开始,您可以使用以下所有内容来执行此操作,尽管我会将其移至 ngOnInit()
。
constructor(public navCtrl: NavController) {
this.testList.forEach(data => data.item.forEach(each =>
{
each.selected = false;
})
)
}
这意味着您可以根据每个对象存储它是否已被选中。然后将您的 html 修改为如下所示。更改是,单击时您将传递项目及其父项而不是索引,并且 [class.highlight]
检查 selected
是否为 true
或 false
。
<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>
并对单击时调用的函数稍作改动,如果它出现在 false
中,这将设置 selected
为真,反之。
编辑
定义一个clear函数来清除所有,和第一个bit迭代到all为false一样。
onSelected(item, parent)
{
this.testList.forEach(data => data.item.forEach(each =>
{ each.selected = false; }));
item.selected ? item.selected = false : item.selected = true;
}
将 selectedOne 变量更改为 Object
public selectedOne = {id: 12, name: 'Stenly'};
并在循环中更新条件 [class.highlight]="(item.id == selectedOne.id && item.name == selectedOne.name)"
<ion-item *ngFor="let item of date.item; let i= index" [class.highlight]="(item.id == selectedOne.id && item.name == selectedOne.name)" (tap)="onSelected(i)">
{{item.name}}
</ion-item>
CHECK WORKING STACKBLITZ
您的 home.html
如下所示:~
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<style>
.highlight {
background-color: #777;
}
</style>
<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.id == selectedOne" (tap)="onSelected(item)">
{{item.name}}
</ion-item>
</ion-item>
</ion-content>
您的 home.ts
onSelected 方法如下所示:~
onSelected(item) {
this.selectedOne = item.id;
}