角度确认框

Question

我将 PrimeNG 表与我构建的模态组件一起使用。问题是我的模态组件有编辑和删除。编辑工作正常，它得到正确的行 id，但删除总是得到第一行的 id。

dashboard.html

 <p-table #dt  [value]="iToDoList" dataKey="id"  [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
                             [rows]="10">

                        <ng-template pTemplate="header">
                            <tr>
                                <th>ID</th>
                                <th>Comment</th>
                                <th>Action</th>

                            </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-row>  
                                <tr>
                                    <td>{{row.id}}</td>
                                    <td>
                                        <div  *ngIf="!row.isEditable">{{row.comment}}</div>
                                        <div *ngIf="row.isEditable">
                                            <input type="text" [(ngModel)]="row.comment">
                                            <span *ngIf="isEmpty(row.comment)" style="color:crimson">Required</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <modal [row]="row"   [disableEditSaveButton]='disableSaveButton'   (deleteRow)="onDeleteToDoList(row)" [showModal]="!row.isEditable"  (selectedRow)="onSelectedRow(row)" (cancelEdit)="onCancelEdit(row)" (save)="onSave(row)"></modal>
                                        </div>
                                        <!--<button (click)="editRow(row)">Edit</button>-->
                                    </td>
                                    <td>                                <button (click)="save(row)">Save</button></td>
                                </tr>
                            </ng-template>

                    </p-table>

dashboard.component

//the value of row id is always the first row

     onDeleteToDoList(row) {

            console.log('ON DELETe '+ row.id); 

        }

    //onSave works, it returns the id of current selected row
     onSave(row)
         {
            console.log('ON save '+ row.id); 

      }

modal.html

下面的粗线是问题，里面的确认方法正在返回 正确的行 id 但是，当用户单击 OK 时， row.id 是 总是在表格的第一行

    <div>

        <div *ngIf='showModal'>
            <span class="fa fa-edit" (click)="onEdit()">

            </span>&nbsp;&nbsp;
//confirm method returns the right id            
<span class="fa fa-trash-o" (click)="confirm()" data-toggle="modal" data-target="#myModal">

            </span>
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Confirm</h4>
                        </div>
                        <div class="modal-body">
                            <p>Delete this record?</p>
                        </div>
                        <div class="modal-footer">
//onOk method always returns the id of the first row
                            <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="onOk()">Yes</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>

                        </div>
                    </div>
                    <div>

                    </div>
                </div>
            </div>
        </div>
    </div>

modal.component

    @Output() deleteRow: EventEmitter<any> = new EventEmitter();
        @Output() save: EventEmitter<any> = new EventEmitter();
        @Output() edit: EventEmitter<any> = new EventEmitter();
        @Input() row: any;

    //onSave method is showing correctly 
  onSave() {


        this.save.emit(this.row);
    }      
        //showing incorrect id (this method is the issue)
        onOk() {

            this.showModal = true;
            console.log("inside " + this.row.id);
            this.deletedRow.emit(this.row);

        }

        //showing the correct id
        confirm()
        {
            console.log("confirm " + this.row.id);      
        }

****************************************************更新****************************************** Modal.html

成功了

   <div *ngIf='showModal'>
    <span class="fa fa-edit" (click)="onEdit()">

    </span>&nbsp;&nbsp;
    <span class="fa fa-trash-o" (click)="BeforeModalOpen()"  data-toggle="modal" data-target="#myModal">

    </span>
    <div class="modal fade" id="myModal" role="dialog" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Confirm</h4>
                </div>
                <div class="modal-body">
                    <p>Delete this record {{row.id}}?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"  (click)="onOk()">Yes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>

                </div>
            </div>
            <div>

            </div>
        </div>
    </div>
</div>

modal.component

 BeforeModalOpen shows the correct ID and onOK shows the incorrect one.

   BeforeModalOpen() {
    // clean the sessionStorage before using it again
    if(sessionStorage.getItem('tempRow')){
       sessionStorage.removeItem('tempRow');
    }
    console.log("inside BeforeModalOpen " + this.row.id);

    // make the object a JSON-string and store it
    sessionStorage.setItem('tempRow', JSON.stringify(this.row));
}

onOk() {
    // read it. parse it back to an object.
    const tempRow = JSON.parse(sessionStorage.getItem('tempRow'));

    // check it
    console.log("inside " + this.tempRow.id);

    // emit it
    this.deletedRow.emit();

    // close the modal
    $('#myModal').modal('hide');
}

dashboard.component

onDeleteToDoList() {
        const tempRow = JSON.parse(sessionStorage.getItem('tempRow'));

        tempRow.isEditable = false;
        this.showEditOption = false;
        //this.iToDoList.filter(row => row.isEditable).map(r => { r.isEditable = false; return r })
        console.log('ON DELETe '+ tempRow.id);


    }

Answer 1

好吧，我还是不明白，为什么价值会丢失，但我可能有一个解决方法给你。

您说当方法BeforeModalOpen() 被调用时，值仍然存在。

然后只需将row 的克隆放入浏览器的会话存储中：

BeforeModalOpen() {
    // clean the sessionStorage before using it again
    if(sessionStorage.getItem('tempRow')){
       sessionStorage.removeItem('tempRow');
    }
    console.log("inside BeforeModalOpen " + this.row.id);

    // make the object a JSON-string and store it
    sessionStorage.setItem('tempRow', JSON.stringify(this.row));
}

稍后，当您单击“是”并触发 onOk() 时，将对象读回并发出。

onOk() {
    // read it. parse it back to an object.
    const tempRow = JSON.parse(sessionStorage.getItem('tempRow'));

    // check it
    console.log("inside " + this.tempRow.id);

    // emit it
    this.deletedRow.emit(this.row);

    // close the modal
    $('#myModal').modal('hide');
}

这一定行得通！

Answer 2

好的，我想我明白你的问题了。

这是导致问题的代码行。

    <button type="button" 
        class="btn btn-primary" 
        data-dismiss="modal" 
        (click)="onOk()">Yes</button>

更准确地说是这个指令

data-dismiss="modal"

该指令关闭模式并删除其内容。这样做会在您在 onOk() 方法中处理它之前杀死 row。

尝试如下解决问题。

首先：删除指令

    <button type="button" 
        class="btn btn-primary" 
        (click)="onOk()">Yes</button>

然后：从 onOk() 方法中关闭模式

    onOk() {
        console.log("inside " + this.row.id);
        this.deletedRow.emit(this.row);

        // now close the modal
        $('#myModal').modal('hide');
    }