угловая коробка подтверждения - PullRequest
Новая
       17

угловая коробка подтверждения

0 голосов
/ 30 мая 2018

Я использую таблицу PrimeNG с модальным компонентом, который я построил.Проблема в том, что мой модальный компонент имеет редактирование и удаление.Редактирование работает правильно, и он получает правильный идентификатор строки, однако delete всегда получает идентификатор первой строки.

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>

панель инструментов.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

Ниже выделена жирная строка, метод подтверждения внутри возвращает верный идентификатор строки,однако, когда пользователь нажимает кнопку ОК, 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);


    }

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Хорошо, я все еще не понимаю, почему ценность теряется, но у меня, возможно, есть обходной путь для вас.

Вы сказали, что значение все еще там, когда вызывается метод 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');
}

Это должно сработать!

0 голосов
/ 31 мая 2018

Хорошо, я думаю, что вижу вашу проблему.

Это строка кода, которая вызывает проблему. 

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

И, если быть более точным, это эта директива 

data-dismiss="modal"

Эта директива закрывает модальное и стирает его содержимое.При этом он убивает row, прежде чем вы сможете обработать его в методе onOk ().

Попробуйте решить проблему следующим образом.

Сначала: удалите директиву 

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