从 Angular Material Table / JSON 数组中获取最大值

Question

我创建了一个函数来映射 json 数据，使用 Angular Material 将其显示为 table。我愿意

在我的和
目前我的id是按时间顺序排列的（即较早的显示为1，较晚的显示为2等）。我怎样才能重新排列它以从最高到最低出价的顺序显示它？

bid.component.html

<div class="container">
        <div class="highest-amount">
            <span class="highest-amt-text">{{bid.bidamt | max}}</span>
            <span class="highest-amt-name">{{bid.name | max}}</span>
        </div>
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" 
        matSort matSortDisableClear matSortActive="bidamt" matSortDirection="desc">
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
            <td mat-cell *matCellDef="let bid"> {{bid.id}} </td>
          </ng-container>
           <ng-container matColumnDef="bidamt">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Bids</th>
            <td mat-cell *matCellDef="let bid"> {{bid.bidamt | number}} UCD</td>
          </ng-container>
          <ng-container matColumnDef="bidname">
            <th mat-header-cell *matHeaderCellDef>Name</th>
            <td mat-cell *matCellDef="let bid"> {{bid.bidname}} </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator
          style="color: rgba(255,255,255,0.7)"
          [pageSize]="2"
          [pageSizeOptions]="[2, 5, 10]"
          aria-label="Select page">
        </mat-paginator>
      </div>

bid.json

{
  "bids": [
    {
      "bidamt": 500,
      "bidname": "Alice",
      "id": 1
    },
    {
      "bidamt": 300,
      "bidname": "Ben",
      "id": 2
    },
    {
      "bidamt": 2000,
      "bidname": "Clare",
      "id": 3
    }
  ]
}

bid.component.ts

export class BidComponent implements OnInit, OnDestroy, AfterViewInit { 
  displayedColumns: string[] = ['id', 'bidamt', 'name'];
  dataSource!:MatTableDataSource<any>;

  @ViewChild('paginator') paginator! : MatPaginator; 
  @ViewChild(MatSort) matSort! : MatSort;

  subscription: Subscription = new Subscription;

  constructor(private BidService: BidService){ }

  async ngOnInit() {
    this.BidService.getBids().subscribe((response:any) =>{
        this.dataSource = new MatTableDataSource(response);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.matSort;
      })
  }

}

Answer 1

你有两种方法：

在创建数据源之前对数组进行排序

this.dataSource = new MatTableDataSource(response
                        .sort((a,b)=>a.bidamt-b.bidamt));

创建类似

的函数

  sortTable(active:string,direction:string)
  {
    this.sort.active=active
    this.sort.direction=direction as SortDirection
    this.sort.sortChange.emit(
           {active: active, direction: direction as SortDirection});
  }

并在分配排序后调用

...
this.dataSource.sort = this.matSort;
this.sortTable('bidamt','asc')

知道最大值并存储在变量中。先声明

max:number=0

然后，在subscribe中简单的使用数组的reduce

 this.BidService.getBids().subscribe((response:any) =>{
    this.dataSource = new MatTableDataSource(response);
    this.max=response.reduce((a,b)=>b.bidamt>a?b.bidamt:a,-1000)
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.matSort; //<--add this line
  })

然后你可以使用在行

中添加一个class

   <tr mat-row [class.highest-amt-name]="row.bidamt==max" 
        *matRowDef="let row; columns: displayedColumns;"></tr>

或使用style-background

   <tr mat-row [style.background-color]="row.bidamt==max?'red':null" 
        *matRowDef="let row; columns: displayedColumns;"></tr>

如果你想在跨度内使用，你只需使用

  {{max}}

更新我们可以使用简单的排序和映射添加新的属性“订单”（或按订单重新放置“id”），例如

response=response.sort((a,b)=>a.bidamt-b.bidamt)
        .map((x:any,i:number)=>({...x,order:i}))
//or
response=response.sort((a,b)=>a.bidamt-b.bidamt)
        .map((x:any,i:number)=>({...x,id:i}))

看看我们如何使用扩展运算符 (...x) 来创建一个对象，该对象具有对象的所有属性和新的属性 “顺序”或属性“编号”）

更新 2 如果我们想获得具有更大“bidamt”的“元素”。使用 reduce 我们可以做到

this.max=response.reduce((a,b)=>b.bidamt>a.bidamt?b:a,response[0])

好吧，如果我们已经对数组进行排序就很简单了

    reduce[0] //the first element or 
    reduce[reduce.length-1]  //the last element

在这种情况下 max 是一个对象，所以要比较我们需要使用的行 max.bidmat

  <tr mat-row [style.background-color]="row.bidamt==max.bidmat?'red':null" 
    *matRowDef="let row; columns: displayedColumns;"></tr>

从 Angular Material Table / JSON 数组中获取最大值

Get max value from Angular Material Table / JSON array

json

pipe

angular