Как применить css класс, основанный на условии, что длина символа> 128

Question

Это приложение angular, я хочу применить класс css, основываясь на условии, что длина переменной переменной больше 128 символов. Я был вдохновлен этим сообщением введите описание ссылки здесь . Как показано ниже в фрагментах кода, я пытаюсь динамически применять стиль на основе условия, что значение charlen находится внутри или снаружи 128. Пожалуйста, я новичок в Angular и не знаю многих концепций, спасибо за предложения.

шаблон. html

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

template.ts

str:String;
charlen:Number;

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

шаблон. css

.class1 {
color:red;
}

.class2 {
 color:blue;
}

Answer 1

Вы можете сделать это так:

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

Answer 2

Используя класс со связыванием свойств, мы можем достичь вышеуказанного

. 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, он работает.

проверьте рабочая демонстрация

Позвольте Я знаю, если у вас возникнут проблемы.