從 Angular 材料表/JSON 數組中獲取最大值

Question

我在 json 數據上創建了 function 到 map，使用 Angular 材料將其顯示為表格。 我想要

1. 在我的表中顯示最高的 bidamt 和相應的
2. 目前我的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

你有兩種方法：

1. 在創建數據源之前對數組進行排序

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

2. 創建一個 function 之類的

    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

然后，在訂閱中簡單使用數組的 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>

或使用樣式背景

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

如果你想在一個跨度中使用，你只需使用

  {{max}}

更新我們可以使用簡單的排序和 map 添加新屬性“order”（或按順序重新放置“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}))

看看我們如何使用擴展運算符 (the ... x) 創建一個 object，它具有 object 的所有屬性和一個新屬性“order”或屬性“id”的變化）

如果我們想獲得具有更大“bidamt”的“元素”，請更新 2 。 使用 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 是 object，因此要比較我們需要使用 max.bidmat 的行

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