按下空格键时禁用 MatSort 角度材质

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 += ' ';