css - 如何根据字符长度> 128 的条件应用 css 类

标签 css angular typescript ng-class

这是 Angular 应用程序,我想根据变量的字符长度大于 128 个字符的条件应用 css 类。我受到这篇文章的启发 enter link description here .如下代码片段所示,我尝试根据 charlen 值在 128 以内或之外的条件动态应用样式。 我是 Angular 的新手,我不知道很多概念,谢谢你的建议。

template.html

<input [ngClass] = "(charlen <128)?'class1':'class2' />

template.ts

str:String;
charlen:Number;

ngInit () {
 str="this is not 128 char";
 charlen = str.length;
}

template.css

.class1 {
color:red;
}

.class2 {
 color:blue;
}

最佳答案

你可以这样做:

<input [ngClass]="{ 'class1': charlen < 128, 'class2': charlen >= 128 }" />

关于css - 如何根据字符长度> 128 的条件应用 css 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59714500/

相关文章:

javascript - Android 不从选择元素打开下拉菜单

html - 工作灯 : BB9900 - Application launches by displaying splash screen for long duration

reactjs - 使用 Vite 和 React 进行生产构建时出错 : Error in Uncaught TypeError: _ is not a function

css - 如何创建固定宽度的侧边栏和全宽内容

javascript - 背景尺寸 :contain "y"?

javascript - 您如何从从 index.html 导入的 Javascript 脚本访问全局变量和函数并在组件中使用它们?

javascript - Mapbox 弹出窗口中的按钮未执行功能

angular - 在 ngOnDestroy 回调中完成 Output() eventemitter

typescript - 是否可以形成多级单一存储库(关于工具和结构的问题)?

javascript - typescript :向时间戳添加额外的一小时