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

下面的粗线是问题，内部确认方法正在返回但是，当用户单击OK然后row.id为时，正确的行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);      
        }

*************** UPDATE ****************************************** 的 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

好的，我想我看到了你的问题。

这是导致问题的代码行。

   public static AskBool(string question) {
     while (true) {
       // If we have a question to ask (the question is not empty one)...
       if (!string.IsNotNullOrWhiteSpace(question)) 
         Console.WriteLine(question); // ... ask it

       // Trim: let be nice and trim out leading and trailing white spaces
       string input = Console.ReadLine().Trim();

       // Let's be nice and accept "yes", "YES", "Y" etc.
       if (string.Equals(input, "y", StringComparison.OrdinalIgnoreCase) || 
           string.Equals(input, "yes", StringComparison.OrdinalIgnoreCase))
         return true;
       else if (string.Equals(input, "n", StringComparison.OrdinalIgnoreCase) || 
                string.Equals(input, "no", StringComparison.OrdinalIgnoreCase))
         return false;

       // In case of wrong user input, let's give a hint to the user
       Console.WriteLine("Please, answer yes or no (y/n)");
     } 
   }

更确切地说，这是指令

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

该指令关闭模态并删除其内容。执行此操作会杀死data-dismiss="modal"，然后才能在onOk（） - 方法中处理它。

尝试按如下方式解决问题。

首先：删除指令

row

然后：从onOk（） - 方法
中关闭模态

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

角度确认框

2 个答案: