typescript 在Angular 16中禁用除单击EDIT按钮的行之外的所有行

bksxznpy 于 2023-10-22 发布在 TypeScript

关注(0)|答案(1)|浏览(140)

目前正在学习Angular，需要一些帮助。
所以我有一个表看起来像这样：

这就是我如何填充表：

<tbody>
<tr *ngFor="let cus of customers;" [ngClass]="{'disableRow' : isDisable}" [attr.id]="'row'+i">
    <td>
        <span *ngIf="!cus.editCell">{{cus.name}}</span>
        <input type="text" class="form-control small cellStyle" [(ngModel)]="cus.name" *ngIf="cus.editCell" />
    </td>
    <td><span *ngIf="!cus.editCell">{{cus.address}}</span>
        <input type="text" class="form-control small cellStyle" [(ngModel)]="cus.address" *ngIf="cus.editCell" />
    </td>
    <td><span *ngIf="!cus.editCell">{{cus.city}}</span>
        <input type="text" class="form-control small cellStyle" [(ngModel)]="cus.city" *ngIf="cus.editCell" />
    </td>
    <td>
        <div class="btn-toolbar">
            <button class="btn btn-primary small" title="Edit" (click)="editRow(cus)"
                *ngIf="!cus.editCell"><fa-icon icon="pen-to-square"></fa-icon></button>
        </div>
    </td>
</tr>

这个按钮的功能：

editRow(row: any){
row.editCell = !row.editCell;    
this.tempName = row.name;
this.tempAddress = row.address;
this.tempCity = row.city; 
}

所以现在发生的是，我点击了小编辑按钮，我可以编辑表格行中的单元格，太棒了！
然而，我也可以点击第二行的编辑按钮，不是那么好。
所以基本上，我试图找到一种方法来禁用所有其他行（想象有10多），而编辑。
我只是想把这个CSS添加到其他行。

.disableRow{ opacity:0.5; pointer-events:none;}

如果这是一个可怕的方式来做这件事，我开放的其他建议。
我只是想防止同时编辑两行或多行的能力。
提前感谢！

typescript

来源：https://stackoverflow.com/questions/77334204/disable-all-rows-except-the-one-where-edit-button-is-clicked-in-angular-16

1条答案

按热度按时间

gopyfrb31#

使用 *ngFor循环，您还可以跟踪当前行的id。https://angular.io/api/common/NgFor

*ngFor="let item of items; index as i"

1.您可以使用此索引来跟踪正在更新的行，并将其存储在行对象之外。
1.然后，您可以使用此索引来显示或隐藏范围名称
1.当点击按钮编辑行时，必须设置当前更新行的存储索引
1.验证当前更新的行时，必须清除该行的存储索引。否则你不能离开这一排。这在实际代码中并不存在
1.与其他列一样，按钮1可以分为2个：一个按钮用于在线路未更新时进入线路更新模式，一个按钮用于在线路更新时验证线路/离开线路更新模式
1.我不认为你需要的样式，你只需要禁用“输入行更新模式”按钮与其禁用属性时，其他行正在更新。这将使按钮变灰，并忽略用户单击它时的操作
1.一旦你完成了所有这些，你会看到你有像*ngIf="isLineBeingEdited(index)"和*ngIf="!isLineBeingEdited(index)"的东西，一个<td>。这意味着您要对相同的条件进行两次求值，但使用if else https://angular.io/api/common/NgIf只求值一次效果会更好

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

1.现在你有一个if/else块用于行的每一列，这也可以优化：如果不更新行，则可以使用一个大块，如果不更新行，则可以使用一个大块（当更新行时）。为了不在dom中添加无用的div（将ngIf放在上面），可以使用ngContainer https://angular.io/api/core/ng-container

<ng-container *ngIf="!isLineBeingEdited(index); else editingRow">
  <td><span>{{cus.name}}</span></td>
  <td><span>{{cus.address}}</span></td>
  ... ETC
</ng-container>
<ng-template #editingRow>
  <td>
    <input type="text" class="form-control small cellStyle" [(ngModel)]="cus.name"/>
  </td>
  <td>
    <input type="text" class="form-control small cellStyle" [(ngModel)]="cus.address"/>
  </td>
  ... ETC
</ng-template>

祝你好运，你能行！：）

赞(0）回复(0）举报 2023-10-22

我来回答

typescript 在Angular 16中禁用除单击EDIT按钮的行之外的所有行

1条答案

相关问题

热门标签

最新问答