1
Когда я нажимаю кнопку «Редактировать», он не открывает поле ввода. После нажатия на мой параметр редактирования, когда я нажму другое поле ввода, оно будет изменено на поле ввода. Мне нужно изменить поле ввода, когда я нажму кнопку «Изменить».Когда я нажимаю значок редактирования, он не открывает поле ввода?
<form class="form-add-expenses" (submit)="addItem($event)">
<div class="row">
<div class="col-sm-2">
<input type="text" class="form-control" [(ngModel)]="masterItem.itemName" placeholder="Item Name" name="name">
</div>
<div class="col-sm-2">
<input type="text" class="form-control" [(ngModel)]="masterItem.itemType" placeholder="Item Type" name="type">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" [(ngModel)]="masterItem.itemDescription" placeholder="Item Description" name="description">
</div>
<div class="col-sm-2">
<input type="text" class="form-control" [(ngModel)]="masterItem.itemCurrentPrice" placeholder="Item Price" name="price">
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-md">add</button>
</div>
</div>
</form>
<table class="table-responsive table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th>Price</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items; let i=index">
<td><!-- {{ item.itemName }} -->
<span *ngIf="i !== indexes">{{ item.itemName }}</span>
<span *ngIf="i === indexes"><input type="text" class="form-control" [(ngModel)]="editUpdate.itemName" name="update.name" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
</td>
<td><!-- {{ item.itemType }} -->
<span *ngIf="i !== indexes">{{ item.itemType }}</span>
<span *ngIf="i === indexes"><input type="text" class="form-control" [(ngModel)]="editUpdate.itemType" name="update.type" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
</td>
<td><!-- {{ item.itemDescription }} -->
<span *ngIf="i !== indexes">{{ item.itemDescription }}</span>
<span *ngIf="i === indexes"><input type="text" class="form-control" [(ngModel)]="editUpdate.itemDescription" name="update.description" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
</td>
<td><!-- {{ item.itemCurrentPrice }} -->
<span *ngIf="i !== indexes">{{ item.itemCurrentPrice }}</span>
<span *ngIf="i === indexes"><input type="text" class="form-control" [(ngModel)]="editUpdate.itemCurrentPrice" name="update.price" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
</td>
<td>
<span *ngIf="i !== indexes"><i class="fa fa-pencil" (click)="editItem(i)" aria-hidden="true"></i></span>
<span *ngIf="i === indexes"><button (click)="UpdateItem()" class="btn btn-md">Update</button></span>
</td>
<td><i class="fa fa-trash" (click)="deleteItem(i)" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>
Мой файл машинопись есть
editItem(i: number) {
this.indexes = i;
this.editUpdate = this.items[this.indexes];
console.log("edit",this.editUpdate);
}