如何在同一个表格中设置最小和最大值？

  • Z时代
  • 2024-01-10
  • 分类：问答

如何在同一个表格中设置最小和最大值？

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

回答：

您可以添加新的属性或创建新的索引变量，表示该元素是最大或最小（无论种类）

然后将其绑定到样式，然后使其成为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'

以上是 如何在同一个表格中设置最小和最大值？ 的全部内容， 来源链接： utcz.com/qa/265738.html

回到顶部