複数のアイテムの画像を変更したとき

Question

ion-new >>イオンアイテム>>アバター画像の上に複数のチェックボックス機能を実装しています。つまり、連絡先リストでは、そのリストから複数の連絡先を押し続けて選択できる必要があります。アバターイメージをアバターイメージに変更してチェックボックスをオンにして選択する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> 

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

タップに長いプレス上で実行されます（クリック）イベント。タップまたは実際のプレスとホールドだけを使用する場合は、(click)を(press)または(tap)に変更する必要があります。

（これはメモリから書かれていますので、クラス名や誤字が間違っている可能性があります:)）。 （私は綱引きを作成しようとします）