时间戳

首页 > 解决方案 > 如何从子数组中选择特定的一个

javascript - 如何从子数组中选择特定的一个

问题描述

当我选择第一个父子数组时，它会选择所有其他父子。我知道这是因为索引 0 对每个人都保持不变。我如何从孩子中选择特定的一个并突出显示它。

链接： stackblitz游乐场

我已经尝试比较父母和孩子的索引，但即使这样我也无法选择特定的孩子数组之一。

主页.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>

主页.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;
        }
  }

我想选择一个特定的并突出显示它。在此处输入图像描述

标签： javascriptangulartypescriptionic3ngfor

解决方案

我将首先为列表中显示的每个项目添加一个选定的属性，尽管我会将其移至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>

并对单击时调用的函数稍作改动，selected如果它进入则设置为真false，反之亦然。

编辑

定义一个 clear 函数来清除所有，与迭代到所有为假的第一位相同。

onSelected(item, parent)
{ 
    this.testList.forEach(data => data.item.forEach(each =>
        { each.selected = false; }));

    item.selected ? item.selected = false : item.selected = true;
}

推荐阅读