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);
}

Working Demo

Answer 2

<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条件的else像这样。如果您有任何问题，请阅读文档：https://angular.io/api/common/NgIf

Answer 3

您可以使用ngx-mask。这将自动防止用户输入错误的日期，从而带来更好的体验：D

Answer 4

在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 5

使用AngulaJS

$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>

包含单词时突出显示表格中的单元格

5 个答案: