Блог

[Class.width]=»header.width» Это не работает.Как еще я могу добиться динамически заданной ширины каждого столбца таблицы.

app.component.html

 <th class="name-center head-color " *ngFor="let header of tableHeader;let headIndex=index" [class.width]="header.width"
    >{{header.value}}</th>
  

app.component.ts

 this.tableHeader=[{"name":"sno","value":"S.No","width":"5%"},
{"name":"training","value":"Training","width":"35%"},
{"name":"skill","value":"Skill","width":"20%"},
{"name":"applicableProficiency","value":"Applicable proficiency","width":"20%"},
{"name":"trainingAction","value":"Training Action","width":"20%"}];
  

 <ng-container *ngFor="let header of tableHeader;let headIndex=index">
    <th class="name-center head-color " [ngStyle]="{'width': header.width}">{{header.value}}</th>
</ng-container>
  

Или

 <ng-container *ngFor="let header of tableHeader;let headIndex=index">
    <th class="name-center head-color " [style.width]="header.width">{{header.value}}</th>
</ng-container>
  

Вы можете использовать контейнер для хранения ссылки на ваш элемент TableHeader и соответственно задать желаемую ширину:

 <table width="100%" border=1>
    <tr>
        <ng-container *ngFor="let header of tableHeader;let headIndex=index">
            <th class="name-center head-color " [width]="header.width">{{header.value}}</th>
        </ng-container>
    </tr>

</table>
  

stackblitz

angular не смотрит на object prop в массиве объектов. для того, чтобы сделать то, что вы хотите, вы должны повторно ввести array: this.tableHeade = Array.from(this.tableHeade) для запуска перерисовки ИЛИ для какого-либо действия (при изменении данных) вы можете указать компоненту перерисовать: ChangeDetectorRef.markForCheck()