Angular

Question

在我的 Angular 9 项目中，我的 HTML 中有一个 table，我在其中定义了 dinamycall、行和列。

其中一些列是 editable。编辑我的值后，我按 ENTER 但不是应用我的编辑，自动启动，单击与按钮关联的事件出现在我的 table.[= 的另一列中15=]

如何防止这种行为？

这是我的代码：

HTML

<table class="table table-striped" aria-describedby="page-heading">
    <thead>
        <tr>
            <th *ngIf="showIndex"> </th>
            <th *ngIf="IsCheckable">Seleziona</th>
            <th *ngFor="let label of displayColumnsLabel">{{label}}</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of  rows; index as rowIndex" [formGroup]="formArray?.controls[rowIndex]"
            [selectRow]="instance" (onSelectedEntity)="onSelectedRowListener($event, row, rowIndex)">

            <td *ngIf="showIndex">
                {{rowIndex+1}}
            </td>
            <td *ngIf="IsCheckable"><input type="checkbox" (click)="checkElement(row,rowIndex)"
                    [disabled]="row['checkDisabled']" [checked]="selectedDatamapContainsElement(row)"></td>
            <td *ngFor="let columnName of displayColumns">
                <ng-template #colonna let-elem let-toggle="toggle">
                    <div *ngIf="toggle && templatesColumns[columnName];then editTemplate; else defaultContent">
                    </div>
                    <ng-template #editTemplate>
                        <ng-template #suggestionSsl>
                            <dm-suggestion-single-lookup #suggestionSingle
                                [controlName]="templatesColumns[columnName]['formControl']"
                                [fieldList]="templatesColumns[columnName]['fieldList'] || 'codice'"
                                [filteredData]="templatesColumns[columnName]['filteredData']"
                                [filterMethod]="templatesColumns[columnName]['filterMethod']"
                                (onFocus)="toggle = true" (mouseOutClick)="toggle = false"
                                (onSelect)="onSelectSuggestion(formArray?.controls[rowIndex], rowIndex)"
                                [openModalLookupMethod]="templatesColumns[columnName]['openModal']">
                            </dm-suggestion-single-lookup>
                        </ng-template>
                        <ng-template #string>
                            <input type="number"
                                (blur)="onChangeInputText(formArray?.controls[rowIndex], rowIndex, $event);toggle = false"
                                [formControlName]="templatesColumns[columnName]['formControl']">
                        </ng-template>
                        <ng-template #number>
                            <input type="number"
                                (blur)="onChangeInputText(formArray?.controls[rowIndex], rowIndex, $event);toggle = false"
                                [formControlName]="templatesColumns[columnName]['formControl']">
                        </ng-template>
                        <div
                            *dmInputType="formArray?.controls[rowIndex]?.get([templatesColumns[columnName]['formControl']])?.value; then suggestionSsl;else string; last number">
                        </div>
                    </ng-template>
                    <ng-template #defaultContent>
                        <div *ngIf="templatesColumns[columnName]; else other" (click)="toggle = true;">
                            {{formArray?.controls[rowIndex]?.get([templatesColumns[columnName]['formControl']])?.value
                            |formObject:templatesColumns:columnName}}
                        </div>
                        <ng-template #other>
                            <div *ngIf="elem === true || elem === false; else soloTesto">
                                <input type="checkbox" [checked]="elem" [attr.disabled]="true">
                            </div>
                            <ng-template #soloTesto>
                                {{elem}}
                            </ng-template>
                        </ng-template>
                    </ng-template>
                </ng-template>

                <ng-container *ngTemplateOutlet="colonna; context:{$implicit:row[columnName], toggle:false }">
                </ng-container>
            </td>
            <td>
                <button *ngIf="deleteRowVisible" name="btnDelete" id="btnDelete" (click)="deleteRowTest(rowIndex,'btnDeleteEvent');toggle=false"
                    class="btn btn-danger btn-sm ng-star-inserted">
                    <fa-icon [icon]="'times'"></fa-icon>
                </button>
            </td>
            <td>
                <button *ngIf="viewRowVisible" (click)="viewDeatil(rowIndex)" class="btn btn-primary btn-sm">
                    <fa-icon [icon]="'eye'"></fa-icon>
                </button>
            </td>
        </tr>
    </tbody>
</table>

这是按钮：

<td>
    <button *ngIf="viewRowVisible" (click)="viewDeatil(rowIndex)" class="btn btn-primary btn-sm">
        <fa-icon [icon]="'eye'"></fa-icon>
    </button>
</td>

TypeScript class（片段）

  deleteRowTest(rowIndex: number,event:String) {
    this.rows.splice(rowIndex, 1);
    this.rowDeleted.emit(rowIndex);
  }

Answer 1

我会尝试将 type="button" 添加到按钮（我记得很多错误，其中意外的表单行为来自默认类型为“提交”的按钮）。

Angular - 在 table 列上按回车键会自动开始按钮单击

Angular - Press enter on table column starts automatically button click

html-table

enter

button

angular9