需要帮助以找到在数据表中应用CSS样式的正确位置

Question

我想通过angular-ngStyle在Table数据中应用一些CSS样式。

逻辑已经完成：“当表宽度小于1250px时，请应用某些CSS样式；” 这是该代码：

export class NanoTableComponent  {

/**
 * This is function which check table width and apply styles if table width is less then 1250px;
 * But problem is to puting this logic on right place in html.
 */
tableStyle(tableWidth: number) {
    console.log('Table Width: ' + tableWidth);
    return tableWidth < 1250 ? { 'min-width':'75px;','flex':'none;' } : { 'flex': '1' };
}

}

在Scss类中

// ********* HERE IS THE PROBLEM **********
// IF in this thid div I made next change: flex: none; and min-width: 75px; 
// I get what I want. But I want that only if table width is less then 1250px;
// That means I need to add that style dynamically through angular,
// problem is where in html to apply this styles.
> div {
  flex: 1;
  display: flex; 
  overflow: hidden;
  margin: 0 2px;
  > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

这是带有html，typescrypt和scss文件的stackblitz。 这不起作用，但是您可以看到与此表相关的整个代码：

https://stackblitz.com/edit/angular-css24?file=src%2Fapp%2Fnano-table%2F_nano-table.scss

问题是：如何在HTML上从scss文件中找到“ div”样式并动态应用于该div样式？

我的目标是使“名称”列变大以增加宽度：

Answer 1

根据宽度向表中添加类

<div class="nano-table-row nano-table-grid-header" #table [class.small]="table.offsetWidth< 1250" >

然后用该类封装csscific CSS规则

 .small
{
 //specific rules here
}