Question

我使用.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>

这就是我的json看起来像

 {
            "id": 218374,
            "name": "\"Dell Inspiron 15 5578 Silver, 15.6 \"\", Touchscreen, Full HD, 1920 x 1080 pixels, Gloss, Intel Core i5, i5-7200U, 8 GB, DDR4, SSD 256 GB, Intel HD, Linux, 802.11ac, Bluetooth version 4.2, Keyboard language English, Keyboard backlit\"",
            "code": "272771020",
            "edited": false,
            "prices": [
                {
                    "id": 448664,
                    "value": "929.79",
                    "updatedAt": "2018-04-16T22:41:59",
                    "eshopId": 1
                },
                {
                    "id": 490139,
                    "value": "811.00",
                    "updatedAt": "2018-04-20T11:42:26",
                    "eshopId": 2
                },
                {
                "id": 490789,
                "value": "781.00",
                "updatedAt": "2018-04-20T11:22:42",
                "eshopId": 3
            }
        ]
}

Answer 1

你可以这样做：

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

您可以添加逻辑来计算％{而不是pr.value > 500。如果应用了true类，则为false，并且不应用任何类。

Answer 2

您有两个选项：[ngStyle]或[ngClass]。我希望你能在任何时候使用ngClass。它的作用是，如果满足某些条件，它会将某些css类应用于元素。

REF：https://angular.io/guide/template-syntax

基于逻辑

2 个答案: