Динамическое изменение строки таблицы Angular 6 для материала с использованием значения индекса - PullRequest
Новая
       7

Динамическое изменение строки таблицы Angular 6 для материала с использованием значения индекса

0 голосов
/ 21 ноября 2018

Получил значение индекса конкретной строки и нужно изменить ее высоту по умолчанию, которую я получаю динамически из другой функции.Итак, у меня есть оба значения по отдельности, теперь есть ли способ с помощью значения индекса i, можно изменить конкретную высоту строки?

Пробовал с использованием ниже Javascript, и он отлично работает для обычных манипуляций HTML, но в угловых (не желательнорезультат): 

console.log("DynamicHeight: "+ dynHeight +"--> rowIndex: "+ rowIndexValue);

document.getElementById('dynamicTable').rows

    x[rowIndexValue].style.height=dynHeight

Ищите решение в угловых 6, помогите с благодарностью!

1 Ответ

0 голосов
/ 22 ноября 2018

Вы можете отслеживать индекс по определениям ячеек (*matCellDef="let element; let index = index") и привязывать к <td> свойству высоты ([style.height.px]="getRowHeight(index)"):

component.html 

<table mat-table [dataSource]="data" class="mat-elevation-z8">

  <ng-container matColumnDef="column_id_1">
    <th mat-header-cell *matHeaderCellDef> $implicit </th>
    <td mat-cell *matCellDef="let element; let index = index" [style.height.px]="getRowHeight(index)"> {{ element.column1 }} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

component.ts 

  getRowHeight(index) {
    return index * 50; // do any calculations and return row height
  }

Обратите внимание, что в этом примере я привязал напрямую к [style.height.px], но вы также можете привязать к другомуСвойства или привязка к высоте по-разному.

Кроме того, если ваши вычисления для высоты просты, вы можете привязать его непосредственно к шаблону, без использования метода для этого.

...