如何更改表css中仅一行的样式

Question

我正试图用ionic(angular(制作一个简单的应用程序，但我遇到了这个问题：我有一个用ngFor循环的HTML表，并且我在ts文件中有一个要验证的条件如果这个条件是真的，我只想有一行改变他的风格，并给出绿色的背景色和默认情况一样，所有线条的背景都是红色

在我的情况下，如果条件this为真，则表的所有行"将是绿色

这是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;
}

Answer 1

您可以使用ngClass并相应地设置条件

<div [ngClass]="{'classname' : condition}"></div>

有关更多信息，请查看此链接https://angular.io/api/common/NgClass