Question

因此，我使用有角度的材料表，并决定为每列创建一个过滤器。该过滤器的输入位于每一列的行标题中。效果很好，但是事情是当我键入并按下空格键时，表格被排序了。我希望这种行为停止，但是如果我使用了(keydown.space)="$event.preventDefault()"，但是没有在输入中插入空格。这是表格下面的代码。

<table mat-table class="full-width-table" (matSortChange)="sortData($event)" [dataSource]="this.datasrcCollIndex" aria-label="Elements" matSort matSortActive="strName" matSortDirection="asc" matSortDisableClear>

        <!-- Name Column -->
        <ng-container matColumnDef="strName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                <mat-form-field style="margin-top: 0px;">
                    <input matInput placeholder="Name" (keyup)="filteringByColumns()"  [(ngModel)]="strName" >
                </mat-form-field>
            </th>
            <td mat-cell *matCellDef="let user">{{user.strName}}</td>
        </ng-container>

        <!-- Gender Column -->
        <ng-container matColumnDef="strGender">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                <mat-form-field style="margin-top: 0px; width: 70px;">
                    <input matInput placeholder="Gender" (keyup)="filteringByColumns()" [(ngModel)]="strGenderColumn">
                </mat-form-field>
            </th>
            <td mat-cell *matCellDef="let user">{{user.strGender}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="this.dictstrDisplayedColumns"></tr>
        <tr mat-row (click)="this.showDetailsOfUsers(user)"
            *matRowDef="let user; columns: this.dictstrDisplayedColumns;"></tr>

    </table>

Answer 1

我遇到了同样的问题并且做了：

event.preventDefault();
(event.target as any).value += ' ';

Answer 2

代替使用

import React, { useEffect } from 'react'; // import useEffect
export default function CustomPaginationActionsTable() {
    const classes = useStyles2();
    const [page, setPage] = React.useState(0);
    const [rows, setRows] = React.useState([]);
    const [rowsPerPage, setRowsPerPage] = React.useState(5);

    useEffect(() => {
      CheckListService.getList().then((response) => setRows(response.data)); // you may need to check if response.data returns an array, otherwise you will face errors.
    }, []) // passing an empty array will call this function only at component mount

我用过

preventDefault()

它仍然允许输入，但不会将事件传播到父元素（因此排序元素永远不会接收到事件）。用法：

stopPropagation()

在按下空格键的角度材料上禁用MatSort

2 个答案: