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

Question

这是angular应用程序，我想申请css class基于变量的字符长度大于128个字符的条件。我受到了这个 post 的启发。如下代码片段所示，我尝试根据 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;
}

Answer 1

你可以这样做:

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

Answer 2

使用class和属性绑定，我们可以实现上面的

.html

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

.ts

str:String;
charlen:Number;

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

Answer 3

检查此代码

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'Angular';

  str:String;
charlen:Number;

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

并使用相同的 html 代码，它正在工作。

检查working demo

如果您遇到任何问题，请告诉我。

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

How to apply css class based on condition that char length > 128

css

typescript

ng-class

angular