如何在单击Angular 4时使列可编辑 [英] How to make a column editable on click Angular 4

问题描述

我正在使用ngFor在表中显示一些记录.我想使列在单击时可编辑.

I am displaying some records in a table using ngFor. I want to make a column editable when it is clicked.

<tr *ngFor="let cd of descriptionCodes; let i = index">
  <td><input type="checkbox"></td>
  <td>
    {{cd.code}}>
  </td>
  <td>
    <select class="form-control border-gray" id="codeType" [(ngModel)]="cd.codeType.id" (change)="onCodeTypeChange(i, cd.id)" [ngModelOptions]="{standalone: true}">
      <option *ngFor="let type of codeTypes" [ngValue]="type.id">{{type.name}}</option>
    </select>
  </td>
  <td>{{cd.description}}</td>
</tr>

如果我想要单击特定代码，那么它应该是可编辑的；如果我单击任何描述，那么它也应该是可编辑的.如果我选择了其他字段，那么我也想一次使单个字段可编辑，那么以前已被编辑的字段现在就不可编辑.

What I want if I click on a particular code then It Should be editable and If I click on any description then it should be editable as well. I also want to make single field editable at a time if I have selected other field then previous field that was edited should not be editable now.

任何人都可以给我提供任何想法吗?

Can anyone please provide me any idea?

推荐答案

您需要具有一个表示列状态的属性，并在td的click事件上对其进行设置.

You need to have one property that denotes the status of the column and set it on the click event of the td.

请检查以下代码:

<tr *ngFor="let cd of descriptionCodes; let i = index">
 <td><input type="checkbox"></td>
 <td (click)="setCodeEdit(i)">
   <span *ngIf="!cd.canEditCode">{{cd.code}}></span>
   <input *ngIf="cd.canEditCode" type="text" class="form-control"  />
 </td>
 <td>
   <select class="form-control border-gray" id="codeType" 
  [(ngModel)]="cd.codeType.id" (change)="onCodeTypeChange(i, cd.id)" 
   [ngModelOptions]="{standalone: true}">
  <option *ngFor="let type of codeTypes" [ngValue]="type.id">{{type.name}}
    </option>
   </select>
  </td>
  <td (click)="setDescEdit(i)">
   <span *ngIf="!cd.canEditDesc">{{cd.description}}></span>
   <input *ngIf="cd.canEditDesc" type="text" class="form-control"  />
 </td>
 </tr>

组件侧:

setCodeEdit(index){
  this.descriptionCodes.forEach(t => t.canEditCode = false)
  this.descriptionCodes[i].canEditCode=true
}

setDescEdit(index){
  this.descriptionCodes.forEach(t => t.canEditDesc= false)
  this.descriptionCodes[i].canEditDesc=true
}

希望有帮助！

这篇关于如何在单击Angular 4时使列可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！