как выбрать конкретный из дочернего массива - PullRequest
Новая
       28

как выбрать конкретный из дочернего массива

2 голосов
/ 05 мая 2019

Когда я выбираю первый родительский массив дочерних элементов, то он выбирает все остальные родительские дочерние элементы.Я знаю, что это потому, что индекс 0 остается одинаковым для всех.Как я могу выбрать определенный из детей и выделить его.

Ссылка: Stabblitz Playground

Я пытался сравнить индекс родителей и детей, но даже с этим я невозможность выбрать конкретный из дочерних массивов.

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;
        }
  }

я хочу выбрать конкретный и выделить его. enter image description here

Ответы [ 3 ]

3 голосов
/ 05 мая 2019

Я бы начал с добавления выбранного атрибута к каждому элементу, показанному в списке, вы могли бы сделать это со всем следующим, хотя я бы переместил это в 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 true, если оно входит в false и наоборот.

Редактировать

Определить функцию очистки, чтобы очистить все, так же, как первый бит, повторяющий все, является ложным. 

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

    item.selected ? item.selected = false : item.selected = true;
}
1 голос
/ 05 мая 2019

ПРОВЕРКА РАБОЧИЙ ШТИКБЛИЦ

Ваш 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 onВыбранный метод, как показано ниже: ~ 

  onSelected(item) {
    this.selectedOne = item.id;
  }
0 голосов
/ 05 мая 2019

Измените переменную selectedOne на Объект 

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>

https://stackblitz.com/edit/ionic-select-one

...