如何设置动态HTML表的列的宽度

Question

我有如下代码

 <table >
    <thead >
        <th *ngFor="let col of workData.columns;trackBy: trackByColumn;
            let hindex=index;" [ngClass]="setWidth(col)" [index]="hindex">
        </th>
    </thead>
</table>


 //TS File

  setWidth(col){
   if(col.field === 'First Name') {
   col.width = '100px';
 }
}

在上表中，我从Http调用中获得了列名List和列Data，并基于它呈现了表。如何根据列的名称动态设置宽度。

例如：

Column: First Name    Width:100px
 Column: Last Name     Width:90px
 Column:  Address      Width: 150px

我正在使用Angular 6。我尝试了javascript解决方案，也尝试了ngClass和ngStyle的角度。但是我无法掌握如何为每列设置宽度。

Answer 1

[ngClass]需要一个对象。您正在调用不返回任何内容的方法

Answer 2

您可以创建一个带有'style'属性的JSON对象，如下所示：

      workData = {
       columns: [
       {
        field: "First Name",
        style: {
          width: "100px",
          "background-color": "red",
          color: "white"
        }
      },
      {
        field: "Last Name",
        style: {
          width: "200px",
          "background-color": "blue",
          color: "white"
        }
      },
      {
        field: "Address",
        style: {
          width: "300px",
          "background-color": "yellow",
          color: "black"
        }
      }
    ]};