編集ボタンをクリックすると選択行を編集する方法角4で

Question

私は選択してすべてのチェックボックスを選択したテーブルを持っています。選択して編集ボタンをクリックして選択行を編集可能にします。

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

Answer 1

rowDataにプロパティを追加する必要があります（editableなど）。 は次に、このようなあなたのコードをレイアウト：すべての選択部分について

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

、私はあなたがthead要素のチェックボックスを持っていると仮定します。これは、このコードを持っている必要があります：

コンポーネントで次に

<td><input type="checkbox" (change)="selectAll($event)" /></td> 

：

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

その後、選択したすべての行を取り、それらを編集可能にテーブルの上の編集ボタンを持っている必要があります。

makeEditable() { 
    this.rowData = this.rowData.map((row) => { 
    if (row.selected) { row.editable = true; } 
    else { row.editable = false; } 
    return row; 
    }); 
} 

これを編集ボタンクリックで呼び出します。

Answer 2

は、私はあなたがこのように、新しいコンポーネントが必要だと思うし、例えば、（非常に高速なコードの書き込み）のために、そこにすべてのロジックを記述します。あなたのテーブルでそれを使用し、その後

<span [hidden]="!isDisplay" (click)="beginEdit(editText)"> 
     {{ text }} 
    </span> 
    <span [hidden]="isDisplay"> 
     <input #editText type="text" [value]="text"> 
    </span> 


export class InlineEditComponent { 
    @Input() public text: any; 
    @Output() public edit = new EventEmitter<string>(); 

    public isDisplay = true; 

    constructor(private _eref: ElementRef) { 
    } 

    @HostListener('document:click', [ '$event.target' ]) 
    public onClick(targetElement) { 
     if (!this._eref.nativeElement.contains(targetElement)) { 
      this.isDisplay = true; 
     } 
    } 

    public beginEdit(el: HTMLElement): void { 
     this.isDisplay = false; 
     setTimeout(() => { 
      el.focus(); 
     }, 100); 
    } 

    public editDone(newText: any): void { 
     this.isDisplay = true; 
     this.edit.emit(newText); 
    } 
} 

Answer 3

<tbody> 
    <ng-container *ngFor='let row of rowData; let i = index'> 
    <tr *ngIf="selected === i"> 
     <td class="text-center"> 
     <input type="checkbox" /> 
     </td> 
     <td><input [(ngModel)]="row.name"></td> 
     <td><input [(ngModel)]="row.email"></td> 
     <td><input [(ngModel)]="row.remark"></td> 

     <td><input [(ngModel)]="row.test1"></td> 
     <td><input [(ngModel)]="row.test2"></td> 
     <td><input [(ngModel)]="row.test3"></td> 
     <td><input [(ngModel)]="row.test4"></td> 
     <td><input [(ngModel)]="row.test5"></td> 
     <td><input [(ngModel)]="row.test6"></td> 
    </tr> 

    <tr *ngIf="selected !== i" (click)="selected = i"> 
     <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> 
    </ng-container> 
</tbody>