Проверка ячейки таблицы HTML и изменение цвета фона с помощью Javascript
Это таблица HTML, и я хочу проверить ее таким образом, чтобы, если пользователь очищает запись, цвет фона конкретной ячейки должен стать красным. Код модели должен быть на JavaScript или на TypeScript. Пожалуйста, не предоставляйте решения jQuery
app.component.html
<table class = "material-table">
<thead>
<tr>
<th></th>
<!-- <th *ngFor = "let schema of tableSchema">
{{ schema.field }}
</th> -->
</tr>
</thead>
<tr *ngFor = "let rowData of tableData">
<td value = "Delete" (click) = "deleteRow(rowData)">X</td>
<td
*ngFor = "let schema of tableSchema"
[class.red-text] = "!rowData[schema.field].valid"
>
<span
#el
contenteditable
(blur) = "rowData[schema.field].value = el.innerText"
>
{{ rowData[schema.field].value }}
</span>
</td>
</tr>
</table>
Нет, я знаю, как проверять элементы формы и отдельные элементы полей статической таблицы, но основная проблема в том, что я никогда не применял проверку, когда таблица отображается в циклах (используя ng for)
Итак, вы просто хотите, чтобы класс применялся, если это условие удовлетворяется, !rowData[schema.field].valid?
Да, вы поняли правильно
Пожалуйста, используйте правильные теги. AngularJS (angularjs.org) - это фреймворк, отличный от Angular (angular.io). При вводе тегов в поле «Теги» на рабочем столе должно отображаться «выдержки тегов»; кусочки информации о теге, который вы собираетесь добавить к своему вопросу; пожалуйста, обязательно прочтите их, если они есть.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать Директивы атрибутов:
JS
import { Directive, ElementRef, HostListener, KeyValueDiffers } from '@angular/core';
@Directive({
selector: '[requiredHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
color = "red";
@HostListener('input') onChange() {
this.highlight();
}
private highlight() {
const color = this.el.nativeElement.innerHTML ? null: this.color;
this.el.nativeElement.style.backgroundColor = color;
}
}
HTML-шаблон:
<td *ngFor = "let schema of tableSchema">
<span #el contenteditable requiredHighlight (blur) = "rowData[schema.field].value = el.innerText" >
{{ rowData[schema.field].value }}
</span>
</td>
Мне нравится это решение, потому что его можно повторно использовать в других шаблонах.
Используйте NgClass.
<td *ngFor = "let schema of tableSchema" [ngClass] = "{'red-text':!rowData[schema.field].valid}">
<span #el contenteditable (blur) = "rowData[schema.field].value = el.innerText">
{{ rowData[schema.field].value }}
</span>
</td>
Вы пробовали ngClass?