Измените изображения нескольких предметов при нажатии

Question

Новинка для ионных 2, Ищет реализацию многофункционального флажка в верхней части списка имен ионов иона иона. Значение, в списке контактов, пользователь должен иметь возможность нажать и удерживать и выбрать несколько контактов из этого списка. любой встроенный или пользовательский подход css, чтобы изменить изображение аватара на изображение аватара с помощью флажка и выбрать?

(Пожалуйста, дайте мне знать, если это не ясно, спасибо)

Answer 1

Лучший способ, вероятно, не имеющие флажок (или притворяется с помощью CSS), а затем в вас компонент создать selectedList, который будет отслеживать, какие на аватарах (при условии, что они имеют идентификатор id).

Html:

<ion-header> 
    <ion-navbar primary> 
    <ion-title> 
     Ionic 2 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content class="has-header"> 
    <ion-list> 
    <ion-item *ngFor="let contact of contactList"> 
     <ion-avatar (click)="clickedAvatar(contact.id)" 
     [class]="isInArray(contact.id) ? 'selected' : 'not-selected'" 
      item-left> 
      <img src="https://pickaface.net/assets/images/slides/slide2.png"/> <!-- get image from contact object --> 
     </ion-avatar> 
     <h2>{{contact.name}}</h2> <!-- etc --> 
    </ion-item> 
</ion-list> 
</ion-content> 

ц:

import { Component } from '@angular/core'; 


@Component({ 
    templateUrl:"page1.html" 
}) 
export class Page1{ 
    contactList: any[]; 

    selectedContacts: any[]; 

    constructor(){ 
     this.selectedContacts = []; 
     this.contactList = [{ 
    id: 1, 
    name: "Steve" 
    }, 
    { 
    id: 2, 
    name: "Mark" 
    }, 
    { 
    id: 3, 
    name: "Lauren" 
    }]; 
    } 

    clickedAvatar(id: number){ 

     console.log(this.selectedContacts); 
     if(this.isInArray(id)){ 
     let index = this.selectedContacts.indexOf(id); 

     this.selectedContacts.splice(index,1); 
     }else{ 
      this.selectedContacts.push(id); 
      console.log(this.selectedContacts.indexOf(id)); 
     } 
    } 

    isInArray(id: number): boolean{ 
     let check: boolean = false; 
     for(let contactId of this.selectedContacts){ 
     if(contactId == id){ 
      check = true; 
     } 
     } 
     return check; 
    } 
} 

CSS

.selected img{ 
    opacity: 0.4; 
} 

The (щелчок) событие будет выполняться на кране и на более прессе. Если вы хотите использовать только кратковременное нажатие или фактическое нажатие и удержание, вы должны изменить (click) на (press) или (tap).

(написал об этом из памяти, поэтому может быть некорректное имя класса или опечатка где-то :)). (Я попытаюсь создать plunkr)