Question

我的餐桌有麻烦

我获取数据，然后将其传递到表中

这是我的代码：

html

<div class="mainContainer">
  <div class="mat-elevation-z8 content">

  <mat-table
    class="mat-elevation-z3 productsTable"
    matSort
    mat-table
    [dataSource]="productsDataForTable">

    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Title
      </mat-header-cell>
      <mat-cell *matCellDef="let row">
        {{row.name.en}}
      </mat-cell>
    </ng-container>

  <ng-container matColumnDef="image">
      <mat-header-cell *matHeaderCellDef>
        Image
      </mat-header-cell>
      <mat-cell *matCellDef="let prod; let i = index" >
        <img class="prodThumbnail" src={{prodsThumbnails[i]}} alt="Product thumbnail">
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Description
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        {{prod.description.en}}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Weight
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        {{prod.weight + ' ' + prod.weightUnit}}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="SKU">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        SKU
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        {{prod.sku}}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="price">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Price
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        $ {{prod.prices[0].unitPrice}} {{prod.prices[0].currency}}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="category">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Category
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        {{prod.category}}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Status
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        {{prod.status}}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef>
        Actions
      </mat-header-cell>
      <mat-cell *matCellDef="let prod">
        <mat-icon class="actionOnProductButton" (click)="openProductDetailsDialog(prod)">create</mat-icon>
        <mat-icon class="actionOnProductButton" (click)="openDeleteProductDialog(prod)">delete</mat-icon>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="tableHeaders"></mat-header-row>
    <mat-row
      class="table-rows"
      *matRowDef="let row; columns: tableHeaders;">

    </mat-row>


  </mat-table>

  </div>
</div>

TS

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Catalog } from '../../catalog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ProductsService } from '../../products.service';
import { EnvironmentConfigService } from 'src/app/manufacturer/environment-config.service';

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

  catalogID: string;
  productsFetched: any;

  // For product thumbnail in table 
  prodsThumbnails = [];

  // Data for products table
  productsDataForTable: MatTableDataSource<[]>;
  tableHeaders = [
    'image',
    'title',
    'description',
    'weight',
    'SKU',
    'price',
    'category',
    'status',
    'actions'
  ];

  @ViewChild(MatSort, {static: true}) sort: MatSort;

  constructor(
    private envService: EnvironmentConfigService,
    private prodsService: ProductsService,
    private snackBar: MatSnackBar,
    public dialog: MatDialog,
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private catService: CatalogsService
  ) { }

  ngOnInit(): void {
    this.route.params.subscribe((params: Params) => {
      this.getProducts(params.id);
    });
  }

  getProducts(id: string) {
    this.prodsService.getProducts(id)
    .subscribe((prods: any) => {
      this.prodsThumbnails = [];
      for (const prod of prods) {
        if (prod && prod.images && prod.images.length > 0 && prod.images[0].path && prod.images[0].path !== '') {
          const src = `${this.envService.getEnvService().getBackendUrl()}/${prod.images[0].path}`;
          this.prodsThumbnails.push(src);
        } else {
          this.prodsThumbnails.push('../../../../assets/images/placeholder-img.png');
        }
      }
      this.productsFetched = prods;
      this.productsDataForTable = new MatTableDataSource(prods);
      this.productsDataForTable.sort = this.sort;
    },
    err => {
      console.log('Error fetching products');
      this.openSnackBar('Error getting porducts data', 'Ok');
    });
  }

  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
    });
  }

}

该表与*ngIf一起使用，我读到matTable不应该包含该表，因为@ViewChild(MatSort, {static: true}) sort: MatSort是未定义的，所以我擦除了我实际使用的*ngIf，但我仍然无法实现排序。

我也尝试了matPagination功能，但没有成功，我想这是由于相同的错误。

我将不胜感激

Answer 1

请尝试将MatSortModule添加到您的模块中。

import {MatSortModule} from '@angular/material/sort';


imports: [
    BrowserModule,
    ...
    MatTableModule,
    MatSortModule
],

Answer 2

尝试一下：

 ngAfterViewInit() {
      this.productsDataForTable = new MatTableDataSource(this.productsFetched);
      this.productsDataForTable.sort = this.sort;
  }


    getProducts(id: string) {
    this.prodsService.getProducts(id)
    .subscribe((prods: any) => {
      this.prodsThumbnails = [];
      for (const prod of prods) {
        if (prod && prod.images && prod.images.length > 0 && prod.images[0].path && prod.images[0].path !== '') {
          const src = `${this.envService.getEnvService().getBackendUrl()}/${prod.images[0].path}`;
          this.prodsThumbnails.push(src);
        } else {
          this.prodsThumbnails.push('../../../../assets/images/placeholder-img.png');
        }
      }
      this.productsFetched = prods;
    },
    err => {
      console.log('Error fetching products');
      this.openSnackBar('Error getting porducts data', 'Ok');
    });
  }

Answer 3

我发现了问题所在

您在matColumnDef中定义的内容实际上应该与将在每行上显示的对象的对象属性相匹配。

所以我确实在将数据传递到表之前填充了对象

角材料台垫排序不起作用

3 个答案: