Question

我正在尝试使用matSort启用对mat-table的排序。

很遗憾，我无法进行排序。我已尝试按照有关Angular Material的文档中的说明进行操作，但我无法弄清楚出了什么问题。

这是我的代码：

非常感谢！

order-details.component.html

    <mat-table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="customerNumber">
            <mat-header-cell *matHeaderCellDef mat-sort-header>CustomerNumber</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.customerNumber}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="customerName">
            <mat-header-cell *matHeaderCellDef mat-sort-header>CustomerName</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.customerName}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="orderNumber">
            <mat-header-cell *matHeaderCellDef mat-sort-header>OrderNumber</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.orderNumber}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="orderAmount">
            <mat-header-cell *matHeaderCellDef mat-sort-header>OrderAmount</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.orderAmount}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;">
        </mat-row>
    </mat-table>
</div>

order-details.component.ts

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatTableDataSource, MatSort } from '@angular/material';
import { Order } from 'src/app/models/order.model';
import { MinimalUser } from './../../../models/minimal-user.model';

@Component({
    selector: 'order-details',
    templateUrl: './order-details.component.html',
    styleUrls: ['./order-details.component.scss']
})
export class OrderDetailsComponent implements OnInit {
    displayedColumns = ['customerNumber', 'customerName', 'orderNumber', 'orderAmount'];
    dataSource: MatTableDataSource<Order>;
    @ViewChild(MatSort) sort: MatSort;
    loadingIndicator: boolean;

    constructor(public dialogRef: MatDialogRef<OrderDetailsComponent>,
        @Inject(MAT_DIALOG_DATA) public data: { orders: Order[], user: MinimalUser }) {
         }

    ngOnInit() {
        this.dataSource = new MatTableDataSource(this.data.orders);
        this.dataSource.sort = this.sort;;
    }


}

Answer 1

请阅读documentation您缺少的<th>和<td>标签

    <ng-container matColumnDef="customerNumber">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>CustomerNumber </th>
        <td mat-cell *matCellDef="let row"> {{row.customerNumber}} </td>
    </ng-container>

Answer 2

在 app.module.ts 的导入列表中将MatSortModule导入到

Sub CheckFolder()
    Dim Path As String
    Dim Folder As String
    Dim Answer As VbMsgBoxResult
    Dim NewPath As String
    Dim scripObj As New Scripting.FileSystemObject


    Path = "C:\Test\"
    For Each sheetz0r In ActiveWorkbook.Sheets

    If Not scripObj.FolderExists(Path & sheetz0r.Name) Then
        Answer = MsgBox("Path does not exist. Would you like to create it?", vbYesNo, "Create Path?")
        Select Case Answer
            Case vbYes
                scripObj.CreateFolder (Path & sheetz0r.Name)
            Case Else
                Exit Sub
        End Select
    End If
    Next
End Sub

无法使用MatSort对垫子表进行排序

2 个答案: