如何在同一個表格中設置最小和最大值？

Question

<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>

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}

Answer 1

您可以添加新的屬性或創建新的索引變量，表示該元素是最大或最小（無論種類）

然後將其綁定到樣式，然後使其成爲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'