离子列表中的多色离子化身边框

问题描述：

我有一个离子列表，每个项目都显示带有彩色边框的圆形离子化身图像。我知道如何做到这一点，并使其成为固定的颜色。但我希望列表中的每个项目具有不同的颜色，具体取决于listItem.color的值。离子列表中的多色离子化身边框

这是工作的代码有一个固定的颜色：

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

我尝试在HTML中设置颜色像这样，但它没有工作： – user3561494

答

您可以使用[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摆脱我们的模型正确的颜色。

离子列表中的多色离子化身边框

相关推荐