Question

我使用ngFor在表格中显示一些记录。我希望在单击列时使列可编辑。

exec msdb.dbo.rds_restore_database 
    @restore_db_name='database_name', 
    @s3_arn_to_restore_from='arn:aws:s3:::bucket_name/folder/file_name_and_extension';

如果点击特定代码，我想要的是它应该是可编辑的，如果我点击任何描述，那么它也应该是可编辑的。如果我选择了其他字段，那么我还想一次编辑单个字段，然后编辑的上一个字段现在不可编辑。

任何人都可以向我提出任何想法吗？

Answer 1

您需要有一个表示列状态的属性，并将其设置为td的click事件。

请检查以下代码：

<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
}

希望它有所帮助！

Answer 2

您可以保存所有单元格信息，例如isedit或editable属性，点击单元格后isedit为true，并使用* ngIf =＆＃34; cell.isedit＆＃34;在单元格内写入新标签然后写入输入或选择或...并在更改后执行某些操作或模糊设置为isedit false或发送更新请求

Answer 3

首先，您必须捕获可以通过以下方式完成的复选框值：

<强> HTML

<tr *ngFor="let cd of descriptionCodes; let i = index">
  <td><input type="checkbox" (change)="checkboxFunction($event)"></td>
  <td>
      <input type="text" class="form-control" value="{{cd.code}}" [readonly]="readOnly" />
  </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>  <textarea type="text" class="form-control" value="{{cd.description}}" [readonly]="readOnly"></textarea>
</td>
</tr>

并在您的TS文件中：

<强> TS

checkboxFunction(event){
   if(event.target.checked){
this.readOnly = 'true';
}
}

如何在单击Angular 4上使列可编辑

3 个答案: