如何根据按钮单击对 Angular 材料表进行排序

Question

单击按钮时，我想对垫子表进行排序。

当您单击列名称时，Mat 表具有排序功能，它会根据列对表进行排序。

单击“从低到高”按钮时，我想根据价格对表格进行排序 这是我的代码： 购物组件 `

import { AfterViewInit, Component, OnInit, ViewChild, Input, EventEmitter } from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';
import { HttpClient } from '@angular/common/http';
import { IItem } from '../items';
import {MatSort, Sort} from '@angular/material/sort';
import { LoginComponent } from '../login/login.component';
import { SharedService } from '../shared.service';
import { MatDialog } from '@angular/material/dialog';
import { AddItemComponent } from '../add-item/add-item.component';


@Component({
  selector: 'app-shopping',
  templateUrl: './shopping.component.html',
  styleUrls: ['./shopping.component.scss']
})
export class ShoppingComponent implements AfterViewInit, OnInit{

  constructor(private http: HttpClient, private sharedService: SharedService,
    private dialog: MatDialog) {}

  @Input() loginSuccess!: EventEmitter<string>;
  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(LoginComponent) loginComponent!: LoginComponent;
  @ViewChild('empTbSort') empTbSort = new MatSort();

  private url = 'assets/items.json';
  username!: any;
  data!: any;
  displayedColumns: string[] = ['id', 'name', 'quantity', 'price', 'count', 'add'];
  dataSource = new MatTableDataSource<IItem>(this.data);
  labelCount = 0
  
  ngOnInit() {
    this.http.get(this.url)
    .subscribe(response => {
      this.data = response;
      this.dataSource = new MatTableDataSource(this.data);
    })

    this.username = this.sharedService.username
  } 

  ngAfterViewInit() {
    this.priceHighToLow();
  }

  openCart() {}

  updateItems(row: any) {
    for(let i = 0; i < this.data.length; ++i) {
      if(this.data[i]["add"] == row.add) {
        this.data[i]["count"] -= 1;
        this.labelCount += 1
      }
    }
    this.dialog.open(AddItemComponent, {width: "20%"})
  }

  priceHighToLow() {}
}

shopping html

<mat-toolbar color="primary">
    <button mat-icon-button>
        <mat-icon>polymer</mat-icon>
    </button>
    <span>Welcome <b>{{username}}</b></span>
    <span class="example-spacer"></span>
    <button mat-icon-button (click)="openCart()">
        <mat-icon [matBadge]="labelCount" matBadgeColor="warn">add_shopping_cart</mat-icon>
    </button>
</mat-toolbar>
<div class="container">
    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef>ID</th>
            <td mat-cell *matCellDef="let item">{{ item.id }}</td>
        </ng-container>
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef>Product Name</th>
            <td mat-cell *matCellDef="let item">{{ item.name }}</td>
        </ng-container>
        <ng-container matColumnDef="quantity">
            <th mat-header-cell *matHeaderCellDef>Quantity</th>
            <td mat-cell *matCellDef="let item">{{ item.quantity }}</td>
        </ng-container>
        <ng-container matColumnDef="price">
            <th mat-header-cell *matHeaderCellDef>Price</th>
            <td mat-cell *matCellDef="let item">{{ item.price | currency }}</td>
        </ng-container>
        <ng-container matColumnDef="count">
            <th mat-header-cell *matHeaderCellDef >Count</th>
            <td mat-cell *matCellDef="let item">{{ item.count }}</td>
        </ng-container>
        <ng-container matColumnDef="add">
            <th mat-header-cell *matHeaderCellDef >Action</th>
            <td mat-cell *matCellDef="let item">
                <button mat-raised-button color="warn" (click)="updateItems(item)">Add item</button>
            </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>
<table> 
    <h2>Price</h2>
    <button (click)="priceHighToLow()"> High to low</button><br>
    <!-- <button (click)="priceLowToHigh()"> High to low</button>
    <h2>Quantity</h2>
    <button (click)="quantityHighToLow()"> High to low</button><br>
    <button (click)="quantityLowToHigh()"> High to low</button> -->
</table>

` 单击“从高到低”按钮后，我希望根据价格对表格进行排序。 我也想把价格从低到高排序。

我需要一种方法来根据按钮点击自定义排序垫表。

Answer 1

组件.html

<table mat-table [dataSource]="dataSource" matSort
                   #empTbSort="matSort" class="mat-elevation-z8">
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
            <td mat-cell *matCellDef="let item">{{ item.id }}</td>
        </ng-container>
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Product Name</th>
            <td mat-cell *matCellDef="let item">{{ item.name }}</td>
        </ng-container>
        <ng-container matColumnDef="quantity">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>
            <td mat-cell *matCellDef="let item">{{ item.quantity }}</td>
        </ng-container>
        <ng-container matColumnDef="price">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Price</th>
            <td mat-cell *matCellDef="let item">{{ item.price | currency }}</td>
        </ng-container>
        <ng-container matColumnDef="count">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Count</th>
            <td mat-cell *matCellDef="let item">{{ item.count }}</td>
        </ng-container>
        <ng-container matColumnDef="add">
            <th mat-header-cell *matHeaderCellDef >Action</th>
            <td mat-cell *matCellDef="let item">
                <button mat-raised-button color="warn" (click)="updateItems(item)">Add item</button>
            </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

组件.ts

@ViewChild('empTbSort') empTbSort = new MatSort();

ngAfterViewInit() {

this.dataSource.sort = this.empTbSort;
}

ngOnInit() {
    this.http.get(this.url)
    .subscribe(response => {
      this.data = response;
      this.dataSource = new MatTableDataSource(this.data);
      this.dataSource.sort = this.empTbSort;
    })

    this.username = this.sharedService.username
  }