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

Question

我正在尝试使用离子（角度）制作一个简单的应用程序，但我遇到了这个问题： 我有一个用 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;
}

Answer 1

您可以使用ngClass 并相应地输入您的条件

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

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