离子列表中的多色离子头像边框

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]属性绑定来执行此操作。请看一下这个笨蛋。

@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从模型中获取正确的颜色。