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>
マイtypescriptファイルは、
editItem(i: number) {
this.indexes = i;
this.editUpdate = this.items[this.indexes];
console.log("edit",this.editUpdate);
}