html - 如何更改表格css中仅一行的样式
问题描述
我正在尝试使用离子(角度)制作一个简单的应用程序,但我遇到了这个问题:我有一个用 ngFor 循环的 HTML 表,如果这个条件为真,我有一个条件要在 ts 文件中验证我只想要一行改变他的风格并赋予绿色背景颜色,并且默认情况下所有线条的背景都是红色
就我而言,如果条件为真,则表“”的所有行都将为绿色
这里是 HTML 文件
<ion-header>
<ion-toolbar color="medium">
<ion-buttons slot="start">
<ion-back-button defaultHref="folder/Inbox"></ion-back-button>
</ion-buttons>
<ion-title>بطاقة جرد الممتلكات</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button expand="block" (click)="scan()">
<ion-icon name="qr-code-outline"></ion-icon> QR Code scanner
</ion-button>
<ion-button expand="block" color="danger" [disabled]="true">
<ion-icon name="checkmark-circle-outline"></ion-icon> تثبيت الجرد
</ion-button>
<button (click)="check()">clickme</button>
<table class="table">
<tr>
<th>مثبت</th>
<th>تفاصيل المجرد</th>
<th>تعريف المجرد</th>
<th>عدد</th>
<th>المجمد</th>
<th>فرع</th>
<th>الاصل</th>
<th>جديد</th>
</tr>
<tr
*ngFor="let item of jardTable"
[className]="checkedWithQr==true? 'checked':'notchecked'"
>
<td>
<ion-checkbox slot="end" checked="{{item.Installed}}"></ion-checkbox>
</td>
<td></td>
<!-- <td>{{qr}}</td> -->
<td id="width">{{item.productId}}</td>
<td>{{item.quantity}}</td>
<td>{{item.product}}</td>
<td>{{item.branch}}</td>
<td>{{item.origin}}</td>
<td>
<ion-checkbox slot="end" checked="{{item.new}}"></ion-checkbox>
</td>
</tr>
</table>
</ion-content>
这里是 ts 文件
import { Component, OnInit } from '@angular/core';
import { BarcodeScanner, BarcodeScannerOptions } from '@ionic-native/barcode-scanner/ngx';
import { AddInvoService } from '../services/serviceAddInvo/add-invo.service';
import { Products } from '../Products';
import {Router} from '@angular/router';
@Component({
selector: 'app-add-invo',
templateUrl: './add-invo.page.html',
styleUrls: ['./add-invo.page.scss'],
})
export class AddInvoPage implements OnInit {
checkedWithQr :boolean;
qrcode: string;
jardTable: Array<Products> = [];
checkelem= {
"id":1,
"new": false,
"origin": "03",
"branch": "2",
"product": "450",
"quantity":"2",
"productId": "03-2-450-2",
"Detail_product": "",
"Installed": false
}
option: BarcodeScannerOptions;
constructor(public barcodeScanner: BarcodeScanner,
private AddInvoService: AddInvoService,
private root:Router) {
}
check() {
for (const iterator of this.jardTable) {
if (iterator.productId == this.checkelem.productId) {
this.checkedWithQr = true;
return this.checkedWithQr;
} else {
this.checkedWithQr = false;
}
}this.root.navigate(['/add-invo']);
}
}
这里是 CSS 文件
.notchecked {
background-color: rgb(196, 16, 16) !important;
color: white;
}
.checked {
background-color: green !important;
color: white;
}
解决方案
您可以相应地使用ngClass
和放置您的条件
<div [ngClass]="{'classname' : condition}"></div>
有关更多信息,请查看此链接https://angular.io/api/common/NgClass
推荐阅读
- c++ - 使用 Imgur API 上传图像时数据无效
- javascript - 比较两个数组以创建一个新数组
- python - 具有多个用于计数的节点的树(Python)
- qt - 如何放大和缩小QSvgWidget中显示的SVG图像?
- c# - 如果一个锚标签存储在 Redis 中,它会在检索时切断关闭锚标签吗?
- python - Python海龟图形停止响应
- mysql - 在 Django 中处理 GeoDjango 时 PostgreSQL VS MySQL
- javascript - 重命名 javascript tabContainer 中的选项卡
- python - 在 SQL Python 中使用 INSERT INTO 时整数值发生变化
- google-bigquery - 按 Timestamp_Trunc 分组,包括计数为“0”的空行