web-dev-qa-db-ja.com

Angular 4のテーブルデータの編集

私は単にAngularの従業員表を表示、追加、削除、更新しようとしています。表の画像は次のとおりです。 enter image description here

今のところ、テーブルの各フィールドを無効にしています。 [編集]ボタンをクリックするたびに、対応する行のフィールドを有効にして、すぐに編集できるようにします。

私のファイルは次のとおりです。

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を使用しています

angulardata-binding
5
Saigal Amatya

EmployeeでisEditableなどのプロパティを使用し、それを使用して次のような編集を無効または有効にできます。

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

次に、編集ボタンのクリックで有効にします

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

このデモを確認してください

13
jitender