Question

我无法按价格对角度材料表中的值进行排序。表格的屏幕为here。因此，要排序的箭头是可见的，但不起作用。我想（也许我错了），该问题可能与“ dataSource”有关-我不确定是否设置正确，但没有收到任何错误。

product-list.html

  <div class="flex-child green">
    <mat-form-field>
      <mat-label>Type product name</mat-label>
      <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
    </mat-form-field>
    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" matSortActive="price"
       matSortDirection="desc" matSortDisableClear>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>Id</th>
        <td mat-cell *matCellDef="let product"> {{product.id}} </td>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let product"> {{product.name}} </td>
      </ng-container>
      <ng-container matColumnDef="category">
        <th mat-header-cell *matHeaderCellDef>Category</th>
        <td mat-cell *matCellDef="let product"> {{product.category}} </td>
      </ng-container>
      <ng-container matColumnDef="price">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Price</th>
        <td mat-cell *matCellDef="let product"> {{product.price}} </td>
      </ng-container>
      <ng-container matColumnDef="popularity">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Popularity</th>
        <td mat-cell *matCellDef="let product"> {{product.popularity}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" colspan="4">No data matching the filter {{input.value}} </td>
      </tr>
    </table>
  </div>

product-list.ts

export class Product {
  constructor(
    public id: number,
    public name: string,
    public category: string,
    public price: number,
    public popularity: number
  ) {
  }
}

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})

export class ProductListComponent implements OnInit {

  products: Product[]
  displayedColumns: string[] = ['id', 'name', 'category', 'price', 'popularity'];
  dataSource = new MatTableDataSource<Product>(this.products);
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  ngOnInit(): void {
    this.productDataService.getAllProducts('rabarbar').subscribe(
      response => {
        console.log(response)
        this.products = response;
        this.dataSource = new MatTableDataSource(response);
      }
    )
    this.dataSource.sort = this.sort
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  constructor(private productDataService: ProductDataService) {
  }
}

我正在从后端发送数据，这是响应：

(5) [{…}, {…}, {…}, {…}, {…}]
0: {id: 1, name: "carrot", category: "vegatables", price: 12, popularity: 1}
1: {id: 2, name: "apple", category: "vegatables", price: 8, popularity: 1}
2: {id: 3, name: "banana", category: "vegatables", price: 9, popularity: 1}
3: {id: 4, name: "lemon", category: "vegatables", price: 5, popularity: 1}
4: {id: 5, name: "strawberry", category: "vegatables", price: 11, popularity: 1}
length: 5
__proto__: Array(0)

在角度垫子表中排序不起作用

0 个答案: