Question

＆＃13;

<table>
  <thead>
  <tr>
    <th><div>Agent ID</div></th>
    <th><div>Country</div></th>
    <th><div>Address</div></th>
    <th>Date</th>
  </tr>
  </thead>
  <tbody>
        <tr *ngFor="let item of resolvedAgents">
          <td>{{item.agent}}</td>
          <td>{{item.country}}</td>
          <td>{{item.address}}</td>
          <td>{{item.date}}</td>
        </tr>
  </tbody>
  <tfoot>
  <tr>
    <td colspan="4">
      {{ resolvedAgents?.length }} missions
    </td>
  </tr>
  </tfoot>
</table>

＆＃13;

import { Component, OnInit } from '@angular/core';
import { Agent } from '../shared/model/agent';
import { AgentsService } from '../shared/services/agents.service';



@Component({
  selector: 'nga-agents-list',
  templateUrl: './agents-list.component.html',
  styleUrls: ['./agents-list.component.scss']
})
export class AgentsListComponent implements OnInit {
  resolvedAgents: Agent[];

  constructor(private agentService: AgentsService) {
  }

  ngOnInit() {
    this.agentService.getAllAgents().subscribe((agents: Agent[]) => {
      agents.sort((x: Agent, y: Agent) =>
        Number(new Date(x.date)) - Number(new Date(y.date)));
      this.resolvedAgents = agents;
      this.getIsolatedAgents();
    });
  }

  setMinMax(agent: Agent) {
    return this.pipe.transform(this.resolvedAgents, 'distance');
  }

}



0
:
{agent: "005", country: "Brazil", address: "Rua Roberto Simonsen 122, Sao Paulo", date: "May 5, 1986, 8:40:23 AM", distance: 9496.361799166812}
1
:
{agent: "007", country: "Brazil", address: "Avenida Vieira Souto 168 Ipanema, Rio de Janeiro", date: "Dec 17, 1995, 9:45:17 PM", distance: 9285.800150412106}
2
:
{agent: "011", country: "Poland", address: "swietego Tomasza 35, Krakow", date: "Sep 7, 1997, 7:12:53 PM", distance: 1415.508180342706}
3
:
{agent: "007", country: "Morocco", address: "27 Derb Lferrane, Marrakech", date: "Jan 1, 2001, 12:00:00 AM", distance: 2301.0971356885716}
4
:
{agent: "013", country: "Poland", address: "Zlota 9, Lublin", date: "Oct 17, 2002, 10:52:19 AM", distance: 1569.274444863945}
5
:
{agent: "008", country: "Brazil", address: "Rua tamoana 418, tefe", date: "Nov 10, 2005, 1:25:13 PM", distance: 8589.24697562705}
6
:
{agent: "005", country: "Poland", address: "Rynek Glowny 12, Krakow", date: "Apr 5, 2011, 5:05:12 PM", distance: 1415.2498838353406}
7
:
{agent: "003", country: "Morocco", address: "Rue Al-Aidi Ali Al-Maaroufi, Casablanca", date: "Aug 29, 2012, 10:17:05 AM", distance: 2080.2380214223626}
8
:
{agent: "009", country: "Morocco", address: "atlas marina beach, agadir", date: "Dec 1, 2016, 9:21:21 PM", distance: 2470.703534438294}
9
:
{agent: "002", country: "Morocco", address: "Riad Sultan 19, Tangier", date: "Jan 1, 2017, 5:00:00 PM", distance: 1804.7796192553526}

＆＃13;

Answer 1

您可以添加新属性或创建一个新的索引变量，指示哪个元素是max或min（无论什么类别）

然后将其绑定到样式，然后使其成为ngFor指数与最大或最小指数值的条件

  minIdx = null;
  maxIdx = null;

  ngOnInit() {
    this.minIdx = 1;
    this.maxIdx = 2;
  }

  <tr *ngFor="let item of resolvedAgents; let i = index"
      [style.background-color]="i === minIdx ? 'red':'blue'">
    <td>{{item.agent}}</td>
    <td>{{item.country}}</td>
    <td>{{item.address}}</td>
    <td>{{item.date}}</td>
  </tr>

更进一步

(i === minIdx) ?  'red': (i === maxIdx) ? 'blue' : 'white'

如何在同一个表格中设置min和max的样式？

1 个答案: