テーブルデータを角型で編集する

Question

私は単に&を表示、追加、削除しようとしていますが、従業員テーブルを角度で更新してください。テーブルのイメージは次のとおりです。

現在、私はテーブルの各フィールドを無効にしています。 「編集」ボタンをクリックするたびに、対応する行のフィールドを有効にして、右に編集することができます。

ここに私のファイルは、以下のとおりです。

employee-data.component.ts

import { Component } from '@angular/core'; 
import { Employee } from './employee'; 
import { NgForm } from '@angular/forms'; 
import { promise } from 'selenium-webdriver'; 


@Component({ 
selector: 'employee-data', 
templateUrl: './employee-data.component.html', 
}) 

export class EmployeeDataComponent { 

id: number; 
name: string; 
address: string; 
gender: string; 
company: string; 

//emp: Employee[] = []; 

employees: Employee[] = [ 
    { 
     id: 1, 
     name: 'Ram', 
     address: 'Kupondole', 
     gender: 'Male', 
     company: 'XYZ Techno Sales' 
    }, 
    { 
     id: 2, 
     name: 'Shyam', 
     address: 'Baneshwor', 
     gender: 'Male', 
     company: 'ABC Enterprises' 
    }, 
    { 
     id: 3, 
     name: 'Prashansha', 
     address: 'Tripureshwor', 
     gender: 'Female', 
     company: 'MNO Inc' 
    }, 
    { 
     id: 4, 
     name: 'Rita', 
     address: 'Ghatthaghar', 
     gender: 'Female', 
     company: 'Subisu' 
    } 
]; 

addRow() { 
    //prompt("Checking the control!"); 
    this.employees.push({ 
     id: this.id, 
     name: this.name, 
     address: this.address, 
     gender: this.gender, 
     company: this.company 
    }); 
} 

deleteEmployee(index) { 

    this.employees.splice(index, 1); 
} 

editEmployee(index) { 

    //code for editing 

} 

は}

employee-data.component.html

<table border="1"> 
<thead> 
    <tr> 
     <td>Id</td> 
     <td>Name</td> 
     <td>Address</td> 
     <td>Gender</td> 
     <td>Company</td> 
     <td>Action</td> 
    </tr> 
</thead> 

<tbody> 
    <tr *ngFor="let employee of employees; let i= index;"> 
     <td> 
      <input type="number" min="1" [(ngModel)]="employee.id" disabled> 
     </td> 
     <td> 
      <input type="text" [(ngModel)]="employee.name" disabled> 
     </td> 
     <td> 
      <input type="text" [(ngModel)]="employee.address" disabled> 
     </td> 
     <td> 
      <input type="text" [(ngModel)]="employee.gender" disabled> 
     </td> 
     <td> 
      <input type="text" [(ngModel)]="employee.company" disabled> 
     </td> 
     <td> 
      <div> 
       <button (click)="editEmployee(i)">Edit</button> 
       <button (click)="deleteEmployee(i)">Delete</button> 
      </div> 
     </td> 
    </tr> 
</tbody> 
</table> 
<hr> 
<br> 
<h1>Add an Employee</h1> 

<form> 
<div> 
    <label>Id</label> 
    <div> 
     <input type="number" class="" name="id" 
     [(ngModel)]="id" required /> 
    </div> 
</div> 

<div> 
    <label>Name</label> 
    <div> 
     <input type="text" class="" name="name" 
     [(ngModel)]="name" required /> 
    </div> 
</div> 
<div> 
    <label>Address</label> 
    <div> 
     <input type="text" class="" name="address" 
     [(ngModel)]="address" required /> 
    </div> 
</div> 
<div> 
    <label>Gender</label> 
    <div> 
     <input type="text" class="" name="gender" 
     [(ngModel)]="gender" required /> 
    </div> 
</div> 
<div> 
    <label>Company</label> 
    <div> 
     <input type="text" class="" name="company" 
     [(ngModel)]="company" required /> 
    </div> 
</div> 
<div>        
    <div> 
     <input type="submit" value="Submit" class="" 
      (click)="addRow()" /> 
    </div> 
</div> 
</form> 

どのように私は、行を編集することができますか？そして、私はあなたが各従業員にisEditableのようなフラグを追加し、無効にするか、

<input type="text" [(ngModel)]="employee.name" [disabled]="!employee.isEditable"> 

のようなものを編集可能にするためにそれを使用することができアンギュラ4

Answer 1

を使用しています[編集]ボタンを有効

<button (click)="employee.isEditable=!employee.isEditable" *ngIf="!employee.isEditable">Edit</button> 

をクリックしてくださいCheck this demo