Question

当我点击编辑按钮时，它不会打开我的输入框。单击我的编辑选项后，当我单击另一个输入框时，它将更改为输入框。当我点击编辑选项时，我需要更改输入框。

                    <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);
}

Answer 1

使用

ChangeDetectorRef.detectChanges()

要反映这些更改，它会像$scope.$digest()一样工作，并会更新（手动触发）更改，并会在您的视图中反映出来。因为有时候不会触发摘要周期来更新更改。

希望它会有所帮助

当我点击编辑图标时它没有打开输入框？

1 个答案: