Asp.net 基于逻辑使用Angular 2更改html元素样式

我正在使用.net core 2作为此应用程序的后端，Angular2作为前端。我遇到了一个问题，我需要检查其他商店的产品之间的价差是否大于BaseEshop的价格，例如10%，如果是，那么我需要将“”背景色更改为红色。每个网上商店大约有100种产品，我需要检查和更改背景颜色

最好的方法是什么。这是我的代码：

import { ProductService } from './../../services/product.service';
import { Product } from './../../models/product';
import { Component, OnInit } from '@angular/core';
import { ToastyService } from 'ng2-toasty';
import { Router, ActivatedRoute } from '@angular/router';
import { Price } from '../../models/price';

@Component({

    templateUrl: 'product-list.html'
  })

  export class ProductListComponent implements OnInit {

        product: Product[];
        prices: Price[];

        constructor(private productService: ProductService) { }

        ngOnInit() {
            this.productService.getProducts().subscribe(product => this.product = product);
            this.productService.getPrices().subscribe(prices => this.prices = prices);

        }
      }

这里是html文件

<table class="table">
        <thead>
                <tr>

                  <th>Code</th>
                  <th>Name</th>
                  <th>BaseEshop</th>
                  <th>Eshop2</th>
                  <th>Eshop3</th>
                  <th>Eshop4</th>
                  <th>Eshop5</th>
                  <th></th>
                </tr>
            </thead>
    <tbody>
    <tr *ngFor="let p of product" >

      <td>{{ p.code }}</td>
      <td >{{ p.name }}</td> 
    <ng-container *ngFor="let pr of p.prices">
      <td *ngIf=" pr.eshopId==1" >{{ pr.value }}</td>
      <td *ngIf=" pr.eshopId==2" >{{ pr.value }}  <span class='glyphicon glyphicon-arrow-up'></span></td>

      <td *ngIf=" pr.eshopId==3" >{{ pr.value }}</td>
      <td *ngIf=" pr.eshopId==4" >{{ pr.value }}</td>
      <td *ngIf=" pr.eshopId==5" >{{ pr.value }}</td>
      </ng-container>
    </tr>

  </tbody>
</table>

您可以这样做：

 <td *ngIf=" pr.eshopId==1" [ngClass]="{'RedClass': pr.value > 500}">{{ pr.value }}</td>

{{pr.value}

您可以添加逻辑来计算百分比，而不是

pr.value>500

。如果

true

应用了类，则为false且未应用任何类。

您可以执行以下操作：

 <td *ngIf=" pr.eshopId==1" [ngClass]="{'RedClass': pr.value > 500}">{{ pr.value }}</td>

{{pr.value}

---

您可以添加逻辑来计算百分比，而不是

pr.value>500

。如果

true

应用了类，则为false，不应用任何类。

您有两个选项：

[ngStyle]

或

[ngClass]

。只要你能使用它，我就更喜欢

ngClass

。它所做的是在满足某些条件的情况下将特定的css类应用于元素

---

参考：

您有两个选项：

[ngStyle]

或

[ngClass]

。只要你能使用它，我就更喜欢

ngClass

。它所做的是在满足某些条件的情况下将特定的css类应用于元素

参考：