将不同的边框颜色应用于ngx-datatable中的颜色数组中的每一行的第一列

问题描述

我有7种颜色，可以说borderColor = ['primary'，'accent'，'emphasis'，'warn'，'error'，'info'，'success']。我想给每行的第一列使用不同的左边框颜色。如果行数大于7，则将从第8行开始，对borderColor数组序列中的每一行重复颜色。 注意*也可以使用ngxdatatable的不同结构，在其中我们可以轻松获取行和列引用。我只需要具有任何ngx数据表，即可在其中显示每行的第一列以具有不同的边框颜色

HTML

<ngx-datatable [columnMode]="'force'" [footerHeight]="50" [rows]="'BasicData.json' | async" [limit]="20">
      <ngx-datatable-column name="Id"></ngx-datatable-column>
      <ngx-datatable-column name="Name"></ngx-datatable-column>
      <ngx-datatable-column name="Gender"></ngx-datatable-column>
      <ngx-datatable-column name="Age"></ngx-datatable-column>
      <ngx-datatable-column name="City" prop="address.city"></ngx-datatable-column>
      <ngx-datatable-column name="State" prop="address.state"></ngx-datatable-column>
  </ngx-datatable>

BasicData.json

[
  {
    "id": 0,"name": "Ramsey Cummings","gender": "male","age": 52,"address": {
      "state": "South Carolina","city": "GlenDale"
    }
  },{
    "id": 1,"name": "Stefanie Huff","gender": "female","age": 70,"address": {
      "state": "Arizona","city": "BeaverDale"
    }
  },{
    "id": 2,"name": "Mabel David","address": {
      "state": "New Mexico","city": "Grazierville"
    }
  },{
    "id": 3,"name": "Frank Bradford","age": 61,"address": {
      "state": "Wisconsin","city": "Saranap"
    }
  },{
    "id": 4,"name": "Forbes Levine","age": 34,"address": {
      "state": "Vermont","city": "norris"
    }
  },{
    "id": 5,"name": "Santiago Mcclain","age": 38,"address": {
      "state": "Montana","city": "Bordelonville"
    }
  },{
    "id": 6,"name": "Merritt Booker","age": 33,"address": {
      "state": "New Jersey","city": "Aguila"
    }
  },{
    "id": 7,"name": "Oconnor Wade","age": 18,"address": {
      "state": "Virginia","city": "Kenmar"
    }
  },{
    "id": 8,"name": "Leigh Beasley","age": 53,"address": {
      "state": "Texas","city": "Alfarata"
    }
  },{
    "id": 9,"name": "Johns Wood","address": {
      "state": "Maine","city": "Witmer"
    }
  },{
    "id": 10,"name": "Thompson Hays","address": {
      "state": "Nevada","city": "Kipp"
    }
  },{
    "id": 11,"name": "Hallie Mack","age": 19,"address": {
      "state": "Minnesota","city": "Darrtown"
    }
  },{
    "id": 12,"name": "Houston Santos","age": 24,"address": {
      "state": "Georgia","city": "Crucible"
    }
  },{
    "id": 13,"name": "Brandy Savage","age": 65,"address": {
      "state": "Idaho","city": "nord"
    }
  },{
    "id": 14,"name": "Finch Barnett","age": 22,"address": {
      "state": "Ohio","city": "Osmond"
    }
  },{
    "id": 15,"name": "Nicole Crosby","age": 77,"address": {
      "state": "Kentucky","city": "Fairfield"
    }
  },{
    "id": 16,"name": "Carrie Mcconnell","age": 26,"address": {
      "state": "South Dakota","city": "Waikele"
    }
  },{
    "id": 17,"name": "Ann James","age": 37,"address": {
      "state": "north Dakota","city": "Siglerville"
    }
  },{
    "id": 18,"name": "Becky Sanford","age": 48,"address": {
      "state": "Massachusetts","city": "Celeryville"
    }
  },{
    "id": 19,"name": "Kathryn Rios","age": 39,"address": {
      "state": "Delaware","city": "Kylertown"
    }
  }]

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）