#html #css #angular
#HTML #css #угловой
Вопрос:
[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%"}];
Ответ №1:
<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>
Ответ №2:
Вы можете использовать контейнер для хранения ссылки на ваш элемент 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>
Ответ №3:
angular не смотрит на object prop в массиве объектов. для того, чтобы сделать то, что вы хотите, вы должны повторно ввести array: this.tableHeade = Array.from(this.tableHeade) для запуска перерисовки ИЛИ для какого-либо действия (при изменении данных) вы можете указать компоненту перерисовать: ChangeDetectorRef.markForCheck()