【前端】ionic4 card卡片显示随机颜色

前言

     小编在前端项目中，需要将不同的作答记录信息卡片，显示不同的颜色，这个效果用到了随机器的生成和typeScript中的集合，以及html中的[ngStyle]属性。

卡片随机颜色实现记   

 一、效果图

                                                                             

二、 ts代码

1.定义卡片颜色集合：cardColor

// 定义卡片颜色集合    
    public cardColor: any =
        ["hsl(42, 48%, 54%)",
            "hsl(138, 24%, 48%)",
            "rgb(200, 138, 131)",
            "rgb(178, 199, 168)",
            "rgb(16, 195, 195)",
            "hsl(0, 21%, 68%)",
            "rgb(226, 166, 198)",
            "hsl(278, 17%, 66%)",
            "rgb(153, 199, 235)",
            "blueviolet"];

2.获取后端数据lists并进行遍历处理，对每条数据中的remark字段添加颜色值

   /**
     * 处理所有作答记录的配色
     * @author 冯浩月
     * @since 2019年3月27日09:27:17
     */
    handleList(lists: any) {
        lists.forEach(element => {
          element.remark = this.cardColor[Math.floor(Math.random() * 6)];  // 卡片的颜色随机生成                                  
           
        });
    }

 三、html代码

     前端使用[ngStyle]渲染颜色

 <!-- 显示数据 -->
    <div style="float:left;width:50%;" *ngFor="let list of lists; let j = index">
        <!-- card框的颜色 -->
        <ion-card class="welcome-card" [ngStyle]="{'background-color':list.remark}">            
            <ion-row>
                <span style="font-size: 13px;margin: 7%;">{{list.userName}}</span>
            </ion-row>
            <ion-row style="margin-top: 4%;margin-left: 4%;font-size: 18px;">
                <div style="font-size:18px;">
                    {{list.content}}
                </div>
            </ion-row>
         <ion-card>
    <div>

小结

     小编在实现这个功能效果的过程中，基本没有什么问题，因为ionic的编程规则与angular的语法有很多相似之处，使用[ngStyle]这个属性是关键，同时懂得借鉴集合数据中的字段值又是第二个关键之处。

                                                                           感谢您的访问！