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

【问题标题】：How to take width of html element in angular2?如何在angular2中获取html元素的宽度？
【发布时间】：2019-01-03 11:56:17
【问题描述】：

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

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

我无法获取当前表格的宽度。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

您可以改用ngClass，正如@SachilaRanawaka 建议的那样，两者都可以。

【讨论】：