多色离子化身在离子列表中的边界

Question

我有一个离子列表，每个项目都显示一个带有彩色边框的圆形离子化身图像。我知道如何做到这一切，并使它成为一个固定的颜色。但我希望列表中的每一项都有不同的颜色，这取决于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中的颜色

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从我们的模型中获得正确的颜色。