Как установить ширину столбца динамической c HTML таблицы - PullRequest
Новая
       29

Как установить ширину столбца динамической c HTML таблицы

0 голосов
/ 27 мая 2020

У меня есть код, как показано ниже 

 <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 и визуализирую таблицу на основе этого. Как мне динамически установить ширину для каждого столбца в зависимости от его имени.

например:

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

Я использую Angular 6. Я пробовал решения javascript, а также ngClass и ngStyle в angular. Но я не могу понять, как установить ширину для каждого из столбцов.

Ответы [ 2 ]

2 голосов
/ 28 мая 2020

[ngClass] ожидает объект. Вы вызываете метод, который ничего не возвращает

Один из возможных способов - привязать свойство style.

component.ts 

  public styles=
  {
    'First Name' : '100px',
    'Last Name' : '90px',
    'Address' : '150px'
  };

компонент. html

 <table >
    <thead >
        <th [style.width]="styles[col.field]" 
            *ngFor="let col of workData.columns; let hindex=index;" >
          {{col.field}}
        </th>
    </thead>
</table>

Демо Stackblitz

То же самое можно сделать и с классами (например, class=classes[col.field])

1 голос
/ 28 мая 2020

Вы можете создать объект JSON с атрибутом 'style' следующим образом:

<code>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" } } ]};

затем в вашем файле. html </p> <pre><code><table> <thead> <th [ngStyle]="col.style" *ngFor="let col of workData.columns;">{{col.field}}</th> </thead> </table>

теперь вы можете добавить более одного стиля в свою таблицу

нажмите здесь, чтобы увидеть, как он работает

...