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）的模式中，我在循環外部是未知的。

您可以使用變量'selectedGame'並在單擊的行中對該屬性進行引用，如果按下cancel，則將其設置爲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); 
}; 

我希望它可以幫助你。