点击编辑按钮如何使选定的行可编辑角度4 [英] how to make selected row editable on click of edit button In angular 4

问题描述

我有一个选择并选中所有复选框的表格，我想让选定的行可以在选择并单击编辑按钮时编辑。

 < TBODY> 
< tr * ngFor ='let row of rowData'> 
< td class =text-center> 
< input type =checkbox/> 
< / td> 
< td> {{row.name}}< / td> 
< td> {{row.email}}< / td> 
< td> {{row.remark}}< / td> 
< td> {{row.test1}}< / td> 
< td> {{row.Test2}}< / td> 
< td> {{row.Test3}}< / td> 
< td> {{row.Test4}}< / td> 
< td> {{row.Test5}}< / td> 
< td> {{row.Test6}}< / td> 
< / tr> 
< / tbody> 
  

解决方案

您应该添加一个属性到 rowData ，例如可编辑。
然后像这样布置代码：

 < tbody> 
< tr * ngFor ='让行rowData'[ngClass] ={'selected'：row.selected}> 
< td class =text-center> 
< input type =checkbox[（ngModel）] =row.selected/> 
< / td> 
< td> 
< input type =text* ngIf =row.editable[（ngModel）] =row.name/> 
< ng-container * ngIf =！row.editable> {{row.name}}< / ng-container> 
<！ - 您可以使用span或者其他任何方法代替ng-container  - > 
< / td> 
<！ - 对其他单元重复操作 - > 
< / tr> 
< / tbody> 
  

对于选择所有部分，我假设你在thead中有复选框，它需要这个代码：

 < td>< input type =checkbox（change）=selectAll（$ event）/>< / td> 
  

然后在您的组件中：

  selectAll（event）{
 if（event.target.checked）{
 this.rowData = this.rowData.map（（row）=> {
 row.selected = true; 
返回行; 
}）; 
} else {
 this.rowData = this.rowData.map（（row）=> {
 row.selected = false; 
 return row; 
} ）; 
 
 
 
 
 $ b $ p 
 $ b 
然后你必须在表格上面有一个编辑按钮，所有选定的行并使它们可编辑。
  makeEditable（）{
 this.rowData = this.rowData.map （row）=> {
 if（row.selected）{row.editable = true;} 
 else {row.editable = false;} 
 return row; 
} ）; 
} 
  
在点击编辑按钮时调用它。
 
I have a table with select and select all check box , i want to make the selected row editable on select and click of edit button.
<tbody>
  <tr *ngFor='let row of rowData'>
    <td class="text-center">
      <input type="checkbox" />
    </td>
    <td>{{row.name}}</td>
    <td>{{row.email}}</td>
    <td>{{row.remark}}</td>
    <td>{{row.test1}}</td>
    <td>{{row.Test2}}</td>
    <td>{{row.Test3}}</td>
    <td>{{row.Test4}}</td>
    <td>{{row.Test5 }}</td>
    <td>{{row.Test6 }}</td>
  </tr>
</tbody>

解决方案
You should add a property to your rowData, such as editable.
Then layout your code like this:
<tbody>
        <tr *ngFor='let row of rowData' [ngClass]="{ 'selected': row.selected }">
          <td class="text-center>
              <input type="checkbox" [(ngModel)]="row.selected" />
          </td>
          <td>
             <input type="text" *ngIf="row.editable" [(ngModel)]="row.name" />
             <ng-container *ngIf="!row.editable">{{row.name}}</ng-container>
             <!-- You can use span or whatever instead of ng-container-->
          </td>
          <!-- Repeat for other cells -->      
        </tr>
      </tbody>
For the select all part, I assume you have checkbox in the thead. It needs to have this code:
<td><input type="checkbox" (change)="selectAll($event)" /></td>
Then in your component:
    selectAll(event) {
        if (event.target.checked) {
            this.rowData = this.rowData.map((row) => {
               row.selected = true;
               return row;
            });
        } else {
            this.rowData = this.rowData.map((row) => {
               row.selected = false;
               return row;
            });
        }
    }
Then you must have an edit button above table that takes all selected rows and makes them editable.
makeEditable() {
  this.rowData = this.rowData.map((row) => {
     if (row.selected) { row.editable = true; }
     else { row.editable = false; }
     return row;
  });
}
Call this on edit button click.

                        
这篇关于点击编辑按钮如何使选定的行可编辑角度4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！