Angular2: Löschen der ausgewählten Tabellenzeile beim Klicken auf die Schaltfläche im modalen Fenster

Question

Ich versuche, modal zu implementieren, wenn der "Löschen" -Knopf auf eine Zeile aus der Tabelle geklickt wird, in dem ein modales Fenster zur Bestätigung erscheint.

Wenn ich nur das Löschen ohne das Modal implementieren, scheint es gut zu funktionieren und löscht nur diese bestimmte Zeile, aber bei der Verwendung des Modal löscht es die erste Zeile allein und nicht die ausgewählte Zeile.

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

Du Looping durch das Spiel Array in der Tabelle und geben in jeder Iteration ein i. Dies ist in der ngfor bekannt, aber nicht außerhalb der Schleife. Im Modal rufen Sie das deleteGame (i) auf und i ist außerhalb der Schleife unbekannt.

Sie könnten eine Variable 'selectedGame' verwenden und einen Verweis auf dieses Attribut in der Zeile, auf die Sie klicken, verwenden und auf null setzen, wenn Sie auf Abbrechen klicken. In der Methode deleteGame können Sie nun das Objekt aus dem Array entfernen, da es jetzt einen Verweis auf das ausgewählte Spielobjekt gibt. Ein besserer Ansatz besteht darin, eine separate Komponente für das Modal zu erstellen und das Spielobjekt durch ein Input() in der modalen Komponente weiterzuleiten und ein eventEmitter zu verwenden, um das Objekt in der übergeordneten Komponente zurückzusenden, wo Sie das Objekt aufrufen können deleteGame-Methode, wenn der Emitter mit dem Spielobjekt ausgesendet wird.

Es ist etwas aussehen könnte:

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

In der modalen Komponente

@Input() selectedGame; 

und einen Ausgang

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

Und eine Löschmethode im Modal dass aussendet einen Eingang verwenden das deleteGame.

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

Ich hoffe, es hilft Ihnen.