Ändern Sie mehrere Artikel Bilder bei gedrückter

Question

Neu zu ionischen 2, auf der Suche nach der Implementierung von Multi-Auswahl-Kontrollkästchen Funktion oben auf Ion-Liste >> Ionen-Artikel >> Avatar Bild. Das bedeutet, dass der Benutzer in einer Kontaktliste mehrere Kontakte aus dieser Liste drücken und halten und auswählen kann. ein beliebiges css-integriertes oder benutzerdefiniertes Verfahren zum Ändern des Avatarbilds in das Avatarbild mit dem Kontrollkästchen und Auswählen von?

(Bitte lassen Sie mich wissen, wenn dies nicht klar ist, Dank)

Answer 1

Der beste Weg ist wahrscheinlich nicht mit einem Kontrollkästchen (oder es mit CSS fälschen) und dann in Ihnen eine selectedList Komponente erstellen, welche Spur davon halten Avatare werden angeklickt (vorausgesetzt sie haben zB eine id als Kennung).

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> 

ts:

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

Die (Klick) Ereignis wird auf einem Hahn und auf einer längeren Presse auszuführen. Wenn Sie nur tippen oder drücken und halten möchten, sollten Sie (click) zu (press) oder (tap) ändern.

(schrieb dies aus dem Speicher so könnte inkorrekte Klassennamen oder ein Tippfehler irgendwo sein :)). (Ich werde versuchen, eine Plunkr zu erstellen)