在输入更改时禁用整个表的呈现-解网

问：

在我的 angular 应用程序中，我使用的是包含 1700 多行的材料表。我注意到，每当我将鼠标悬停在输入字段上时，它都会完全更新。当我在输入字段的旁边放置一些值时，也会发生同样的情况：它完全呈现自己，因此性能变得非常慢。在 gif 上，您可以看到确切发生的事情：

下面是值列的 ng-container 的样子：

<ng-container matColumnDef="varValue">
            <th mat-header-cell class="varValue-header" *matHeaderCellDef> Value </th>
            <td mat-cell *matCellDef="let ddsVariable" class="varValue-cell">
                <mat-form-field class="matFormField" appearance="outline">
                    <input type="number" id="quantity" name="quantity" min="0" max="999999" matInput class="input-value"
                        [value]="ddsVariable.value" (input)=" handleEditRow(ddsVariable.id,$any($event).target.value)">
                </mat-form-field>
            </td>
        </ng-container>

我这边的问题是：我怎样才能禁用那个完整的更新，以及它是否可能？

角材料垫形场

在阅读了文档后，我发现，问题出在使用 [dataSource] 作为初始化表的传统方法。因此，我根据需要更改了表的代码，即我不使用 dataSource，而是在加载全新数据时迭代可用的数据源并呈现它。这使我能够避免自动呈现 COMPLETE 表，但只呈现行的列，每当它也发生变化时。这是它现在的样子：

<div class="left-table">
    <table>
        <!-- Table header -->
        <thead>
            <tr>
                <th class="select-header">
                    <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
                    </mat-checkbox>
                </th>
                <th class="varName-header"> Name </th>
                <th class="varType-cell"> Type </th>
                <th class="varValue-header"> Value </th>
            </tr>
        </thead>

        <tbody>
            <ng-container *ngIf="ddsVariablesLeft.length > 0">
              <!-- here i am iterating -->
                <tr *ngFor="let row of ddsVariablesLeft"> 
                    <td class="select-cell">
                        <mat-checkbox (click)="$event.stopPropagation()"
                            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                        </mat-checkbox>
                    </td>
                    <td class="varName-cell"> {{row.name}}</td>
                    <td> {{row.type}}</td>
                    <td class="varValue-cell">
                        <mat-form-field class="matFormField" appearance="outline">
                            <input type="number" id="quantity" name="quantity" min="0" max="999999" matInput
                                class="input-value" [value]="row.value"
                                (input)=" handleEditRow(row.id,$any($event).target.value)">
                        </mat-form-field>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>
</div>

上一个：使用 Angular Material 的 mat 表单字段输入渲染问题

下一个：如何在 Angular 17 的 mat-form-field 和 mat-autocomplete 面板之间添加 16 px 的空间？

在输入更改时禁用整个表的呈现

Disable rendering of the whole table on input change

评论