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

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），并且在循环外不知道i。

您可以使用变量“ selectedGame”，并在单击的行中引用该属性，如果按“取消”，则将其设置为null。 在deleteGame方法中，您现在可以从数组中删除对象，因为现在有对选定游戏对象的引用。

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

它可能看起来像：

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

在模态组件中使用输入

@Input() selectedGame;

并输出

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

模态中的delete方法发出deleteGame。

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

希望对您有帮助。