Question

当我在表格的任何一行上点击“删除”按钮时，我试图实现模态，其中弹出一个模态窗口要求确认。

当我只是在没有模态的情况下实现删除时，它似乎工作正常并且仅删除该特定行，但是在使用模态时它会删除第一行而不是选定的行。

user.component.html

<h1>{{welcome}}</h1>
<table class="table table-bordered">
    <tr>
        <th>#</th>
        <th>Game</th>
        <th>Platform</th>
        <th>Release</th>
        <th>Actions</th>
    </tr>
    <tr *ngFor="let game of games | paginate: {itemsPerPage: 5, currentPage:page, id: '1'}; let i = index">
        <td>{{i + 1}}</td>
        <td>{{game.game}}</td>
        <td>{{game.platform}}</td>
        <td>{{game.release}}</td>
        <td><button data-title="title" data-id="2" data-toggle="modal" data-target="#deleteModal" class="confirm-delete"> Delete</button>
    </tr>
</table>
<pagination-controls (pageChange)="page = $event" id="1" maxSize="5" directionLinks="true" autoHide="true">
</pagination-controls>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
            <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
        </div>
        <div class="modal-body">

            <div class="alert alert-danger">Are you sure you want to delete this Record?</div>

        </div>
        <div class="modal-footer ">
            <button type="button" class="btn btn-success danger" (click)="deleteGame(i)"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
            <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

user.component.ts

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'user',
  templateUrl: 'user.component.html',
})
export class UserComponent  { 
    welcome : string;
    games : [{
        game: string,
        platform : string,
        release : string
    }];
    constructor(){
        this.welcome = "Display List using ngFor in Angular 2";

        this.games = [{
            game : "Deus Ex: Mankind Divided",
            platform: " Xbox One, PS4, PC",
            release : "August 23"
        },
        {
            game : "Hue",
            platform: " Xbox One, PS4, Vita, PC",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "Deus Ex: Mankind Divided",
            platform: " Xbox One, PS4, PC",
            release : "August 23"
        },
        {
            game : "Hue",
            platform: " Xbox One, PS4, Vita, PC",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "Deus Ex: Mankind Divided",
            platform: " Xbox One, PS4, PC",
            release : "August 23"
        },
        {
            game : "Hue",
            platform: " Xbox One, PS4, Vita, PC",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "Deus Ex: Mankind Divided",
            platform: " Xbox One, PS4, PC",
            release : "August 23"
        },
        {
            game : "Hue",
            platform: " Xbox One, PS4, Vita, PC",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "Deus Ex: Mankind Divided",
            platform: " Xbox One, PS4, PC",
            release : "August 23"
        },
        {
            game : "Hue",
            platform: " Xbox One, PS4, Vita, PC",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        }];
    };

    deleteGame(i){
      this.games.splice(i,1);
    }
};

Answer 1

您正在循环遍历表中的游戏数组，并在每次迭代中给出一个i。我在ngFor中已知，但不在循环之外。在模态中，你调用deleteGame（i），我在循环之外是未知的。

您可以使用变量＆＃39; selectedGame＆＃39;并在您单击的行中引用该属性，并在按下取消时将其设置为null。在deleteGame方法中，您现在可以从数组中删除该对象，因为现在有对所选游戏对象的引用。

也许更好的方法是为模态创建一个单独的组件，并通过模态组件中的Input（）传入游戏对象，并使用eventEmitter将对象发回到父组件中，您可以在其中调用deleteGame使用游戏对象发射发射器时的方法。

它可能看起来像：

<game-delete-modal [selectedGame]="selectedGame" (deleteGame)="deleteGame($event)"></game-delete-modal>

在模态组件中使用输入

@Input() selectedGame;

输出

@Output() deleteGame = new EventEmitter<Game>();

发出deleteGame的模式中的删除方法。

onDeleteGame() {
    this.deleteGame.emit(this.selectedGame);
};

我希望它可以帮到你。

Angular2：在模态窗口中单击按钮时删除选定的表行

1 个答案: