Tabellendaten Bearbeiten, im Winkel 4
Ich versuche einfach nur, um anzuzeigen, hinzuzufügen, zu löschen & aktualisieren Sie die employee-Tabelle in Eckige. Hier ist das Bild der Tabelle:
Da ich mittlerweile deaktiviert haben, jedes Feld der Tabelle. Immer, wenn ich Sie auf den Knopf "Bearbeiten" ich will das Feld der entsprechenden Zeile aktiviert werden, so kann ich das Recht "Bearbeiten" auf!
Hier sind meine Dateien:
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>
Wie kann ich Bearbeiten, die Zeile? Und ich bin mit Winkel-4
InformationsquelleAutor Saigal Amatya | 2017-12-08
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie eine Eigenschaft wie
isEditable
mit Mitarbeiter-und es verwenden, um aktivieren oder deaktivieren der Bearbeitung etwas wieAktivieren Sie dann auf die Schaltfläche Bearbeiten klicken Sie auf
Schauen Sie sich diese demo
InformationsquelleAutor jitender