Подсветка ячейки в таблице, когда слово включено

Question

У меня есть таблица, которую я хотел бы выделить, когда появляется специальный символ. Пример ниже.

Когда дата введена 11.2020, ячейка не должна подсвечиваться, но когда появляется запись 11.2020+, фон текста меняется на красный. Как установить такую ​​маску?

Мой код

<td>
<div style="background-color:red; color:white; font-weight:bold"><span ng-if="data.data=='11.2020'">{{data.data}}</span></div>
</td>

Answer 1

Попробуйте так:

. html

<td [style.color]="isValid(data.data) ? 'black' : 'red'">{{data.data}}</td>

.ts

isValid(str) {
  return !/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}

Рабочая демонстрация

Answer 2

Использование Angula JS

$scope.validate=function(data){
if (/^[a-zA-Z0-9- ]*$/.test(data) == false)
  return true;

 return false;
}

.cell-highlight{
  background-color:red;
  color:white; 
  font-weight:bold;
}

<td>
<div ng-class="{'cell-highlight':validate(data.data)">{{data.data}}</div>
</td>

Answer 3

В angular вы можете вызвать функцию в ngClass для возврата классов в зависимости от ваших условий. Например:

<td>
 <div [ngClass]="getBackgroundColor(data.data)"> {{data.data}</div>
</td>

И в вашем файле компонента:

public getBackgroundColor(value:string): string {
 if (value === "11.2020")
  return "bg.light"; // or whatever colour you want
 } else if (value.includes("11.2020")) { // or match with your regex
  return "bg.danger";
 }
  return "bg.light";
}

Answer 4

Вы можете использовать ngx-mask . Это автоматически препятствует тому, чтобы пользователь печатал неправильную дату, для лучшего опыта: D

Answer 5

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

используйте еще условие ngIf, как это. и если у вас есть проблемы, просто прочитайте документацию: https://angular.io/api/common/NgIf