如何在使用模态弹出窗口时获取ngfor中的索引值?

时间:2018-01-09 11:56:31

标签: html html5 angular typescript

Normal View With Modal PopUp

点击删除按钮时,我打开小弹出窗口确认删除文件。弹出窗口我有一个删除按钮,当用户点击删除按钮时,我传递了文件ID和索引值。

问题是,在点击第3个或任何索引时,它会获取索引0和第0个索引文档ID。

HTML

<ng-template #tmplt>
    <tr *ngFor="let kbase of Colum; let i =index">
        <td *ngIf="kbase.DocumentDetails!=null">{{kbase.DocumentDetails.DocName}}</td>
        <td *ngIf="kbase.DocumentDetails==null"></td>
        <td>{{kbase.ModifiedBy}}</td>
        <td>{{kbase.ModifiedDate}}</td>
        <td>
            <div class="form-group col-md-8">
                <select name="select" class="form-control" (change)="status()" [(ngModel)]="kbase.IsStatus">
                    <option value="true">Active</option>
                    <option value="false">In Active</option>
                </select>
            </div>
        </td>
        <td>
            <app-file-upload [documentModel]="kbase.DocumentDetails" [isDeleteRequired]="true" [isMultipleFile]="true" [model]="kbase" (emitterFile)="fileSelect($event,i)"></app-file-upload>
        </td>
        <td>
            <button class="btn btn-danger" type="button" data-toggle="modal" data-target="#exampleModalCenter">Remove</button>
            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle">Delete</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            Are You Sure,You Want To Delete This Row?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="Delete(i,kbase.DocumentDetails.Id)">Delete</button>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</ng-template>

TS文件: 我的方法:

Delete(index: number, id: number) {
        this.savestatus = false;
        if (index != -1) {
            this.Colum.splice(index, 1);
            if (id != 0) {
                this._knowledgebaseService.Delete(id).subscribe(x => {
                    if (x.Success)
                        this.deletemessage = true;
                    this.result = x; 
                });
            }
        }
    }

0 个答案:

没有答案