イオンリストのマルチカラーイオンアバターの境界

Question

私はイオンリストを持っており、各アイテムは着色された境界線を持つ円形のイオンアバター画像を示しています。私はこれをすべて行い、固定色にする方法を知っています。しかし、listItem.colorの値が何であるかに応じて、リスト上の各アイテムを異なる色にしたいと思います。

この

は1つの固定色を持っているコードを働いている：

CSS：

.item-md ion-avatar img { 
width: 60px !important; 
height: 60px !important; 
border-radius: 50% !important; 
overflow: hidden !important; 

border: 2px solid #fce515 !important; 
} 

HTML：

<ion-list class="wrapping-list"> 
    <ion-item no-lines *ngFor="let listItem of list; let i = index" (click)="seeListItem(i)" (long-press)="longPressListItem(i)" (swipe-left)="swipeLeftItem(i)"> 
     <ion-avatar item-left> 
      <img width="73px" height="43px" src="{{listItem.thumbnail}}" /> 
     </ion-avatar> 
     <h2 class="title-text" >{{ listItem.name }} </h2> 
    </ion-item> 
</ion-list> 

私はlistItemの中にあるものに境界線の色を設定するためにいくつかの方法が必要です.color

Answer 1

[style.border]属性バインディングを使用すると、そうすることができます。 this plunkerをご覧ください。

あなたのビューで

@Component({...}) 
export class HomePage { 

    public items: Array<{ name: string, imageUrl: string, color: string }>; 

    constructor() { 
     this.items = [ 
     { name: 'Woody', imageUrl: '...', color: '#dff0d8' }, 
     { name: 'Buzz Lightyear', imageUrl: '...', color: '#d9edf7' }, 
     { name: 'Jessie', imageUrl: '...', color: '#fcf8e3' } 
     ]; 
    } 
} 

そして：

<ion-list> 
     <ion-item *ngFor="let item of items"> 
     <ion-avatar item-left> 
      <img [style.border]="'5px solid' + item.color" [src]="item.imageUrl"> 
     </ion-avatar> 
     <h2>{{ item.name }}</h2> 
     <p>Lorem ipsum lorem ipsum...</p> 
     </ion-item> 
    </ion-list> 

[style.border]="'5px solid' + item.color"に最初の部分は単なる文字列'5px solid'であることがわかり、その後、我々は我々のモデルから右の色を取得するためにitem.colorを使用してください。