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

问题描述

我无法按价格对角度材料表中的值进行排序。表格的屏幕为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",price: 8,popularity: 1}
2: {id: 3,name: "banana",price: 9,popularity: 1}
3: {id: 4,name: "lemon",price: 5,popularity: 1}
4: {id: 5,name: "strawBerry",price: 11,popularity: 1}
length: 5
__proto__: Array(0)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）