在Angular Material中按下空格键禁用MatSort

Question

我正在使用 Angular Material 表格，并决定为每列制作一个筛选器。这些筛选器的输入位于每列的行标题中。这很好用，但问题是当我在输入时按下空格键时，表格就会被排序。我希望停止这种行为，但如果我使用 (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>

- Angel Treviño

---

应用一些正则表达式，以防止输入中出现连续的空格。 - Sayan

谢谢你的回答，Sayan。但是你能详细解释一下你的答案吗？我不明白为什么我要使用正则表达式来阻止事件发生，或者是我有什么地方理解不正确吗？ - Angel Treviño

你能在 StackBlitz 上提供你的代码吗？ - Amir Azizkhani

我制作了一个快速的StackBlitz，省略了一些功能和样式，但问题仍然存在。当您尝试在表格的行标题中键入并按下空格时，排序箭头会被激活，使数据可排序。https://stackblitz.com/edit/angular-dgc151 - Angel Treviño

Answer 1

不要使用

preventDefault()

我使用了

stopPropagation()

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

用法：

(keydown.space)="$event.stopPropagation()"

- ESipalis

Answer 2

我遇到了同样的问题，我做了以下操作：

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

- Andrei Diaconescu