bootstrap 4 - How to control angular dynamic table style

Question

I created a generic component using bootstrap and I loop over rows and columns but the problem is each row have a different style

<table>
    <thead>
      <tr>
        <th *ngFor="let item of ColData">{{ item.header }}</th>
      </tr>
    </thead>
    <tbody>
        <tr *ngFor="let record of GridData">
          <td *ngFor="let item of ColData" [ngStyle]="{'highlight' : item.field === status }">
           <span class="d-flex">
          <span class="icon-box mr-2"><i class="pwc-beg text-primary icon-center"></i></span>
          <span class="d-flex flex-column">
            <span> {{record [item.field]}}</span>
          </span>
        </span>
      </td>
     <span class="text-muted text-uppercase">Proj-reflorem</span>
          </span>
        </span>
      </td>
      <td>
         lorem lorem lorem lorem 
      </td>
      <td>
         lorem lorem 
        <span class="d-block text-muted">  lorem lorem </span>
      </td>
      <td>
       lorem lorem 
      </td>
      <td>
        <span class="badge badge-success">OnHOLD</span>

      </td>
    </tr>
    </tbody>
  </table>

How can I customize it the same way with the reusable table?

Answer 1

等待大神答复