Angular中如何使用ngClass按字符数动态设置div元素高度

步骤1：在对应组件的CSS文件中添加两个高度类 #

你可以先在app.component.css里定义两个对应高度的样式类，可选增加overflow属性避免内容溢出：

.height-50 {
  height: 50px;
  overflow: hidden;
}
.height-100 {
  height: 100px;
  overflow: hidden;
}

步骤2：修改app.component.html模板，添加ngClass判断逻辑 #

注意你原有代码的div标签缺少闭合的>，修正后通过ngClass绑定字符长度判断规则即可：

<div 
  class="col-md-7 p-0 pr-2 pb-2 pt-2"
  [ngClass]="item.name?.length > 300 ? 'height-100' : 'height-50'"
>
  <span class="pb-2 pt-2">{{item.name}}</span>
</div>

代码里的?.是可选链运算符，用于避免item.name为undefined/null时控制台报错，如果你的业务逻辑能保证item.name一定存在，可以直接写item.name.length > 300。

可选替代方案：用ngStyle直接绑定高度 #

如果你不想额外定义CSS类，也可以直接动态绑定style属性实现需求：

<div 
  class="col-md-7 p-0 pr-2 pb-2 pt-2"
  [style.height.px]="item.name?.length > 300 ? 100 : 50"
  style="overflow: hidden;"
>
  <span class="pb-2 pt-2">{{item.name}}</span>
</div>

内容的提问来源于stack exchange，提问作者vidya