如何在angular2中获取html元素的宽度？

Question

我想获取表格的宽度，然后使用该宽度作为条件，以便根据宽度动态应用样式。
示例：

div class="nano-table-grid"
    [ngStyle]="{ tableCurrentWidth < 1200px ? 'flex: none; max-width: 75px;'}>

我在选择表格的当前宽度时遇到问题。

Answer 1

通过创建单独的样式类来使用ngClass。

.sample{
  flex: none; 
  max-width: 75px;
}

div class="nano-table-grid"  [ngClass]="{'sample':  tableCurrentWidth < 1200px }>

Answer 2

<div #table class="nano-table-grid"
  [ngStyle]="tableStyle(table.offsetWidth)"></div>

tableStyle(tableWidth: number) {
  return tableWidth > 1200 ? {
    display: 'block'
  } : {
    display: 'flex',
    maxWidth: '75px'
  }
}

您可以按照@SachilaRanawaka的建议使用ngClass，两者都可以。