angular - 在 Angular 4 中编辑表格数据

Question

我只是想在 Angular 中显示、添加、删除和更新员工表。这是表格的图像:

到目前为止，我已经禁用了表格的每个字段。每当我单击“编辑”按钮时，我都希望启用相应行的字段，以便我可以立即进行编辑!

这是我的文件:

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>

如何编辑行？我正在使用 Angular 4

Answer 1

您可以对员工使用类似isEditable 的属性，并使用它来禁用或启用编辑类似

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

然后点击编辑按钮启用

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

Check this demo