Angular 2 bootstrap modal pass data

Question

Я новичок на угловом 2. Я пытаюсь выполнять простые операции с crud. Однако у меня проблема с использованием bootstrap modal. Код ниже, открывает bootstrapmodal, но я не могу отправить выбранный фильм по методу DeleteMovie().

<div style="margin: 20px"> 
    <h2>Movies List</h2> 

    <input type="button" Value="Add Movie" class="btn btn-primary" (click)="AddMovie()"/> 
<hr/> 

    <div class="row"> 
     <div class="col-md-12"> 
      <table class="table table-bordered"> 
       <thead> 
        <tr> 
         <th>Movie Name</th> 
         <th>Genre</th> 
         <th>Edit</th> 
         <th>Delete</th> 
         <th>Delete2</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr *ngFor="let mv of movies"> 
         <td>{{mv.MovieName}}</td> 
         <td>{{mv.MovieGenre}}</td> 
         <td><a routerLink="/movies/{{mv.movieID}}"><i class="glyphicon glyphicon-edit"></i></a></td> 
         <td><i class="glyphicon glyphicon-remove clickable" (click)="removeMovie(mv)"></i></td> 
         <td><i class="glyphicon glyphicon-remove clickable" data-toggle="modal" data-target="#myModal2" data-id="{{mv.MovieName}}" (click)="SelectMovie(mv)"></i></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 

</div> 



<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title" id="myModalLabel">Delete Record</h4> 
      </div> 
      <div class="modal-body"> 
       Do you want to delete {{selectedMovie.MovieName}} 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" (click)="removeMovieV2(selectedMovie)" data-dismiss="modal">Delete</button> 
      </div> 
     </div> 
    </div> 
</div> 

@Component({ 
    selector: 'movies2', 
    templateUrl: '/templates/movies.component.html', 
    providers: [MoviesService] 
}) 
export class MoviesComponent implements OnInit { 

    isLoading = true; 
    movies: any = []; 
    selectedMovie:any={}; 

    constructor(private _moviesService: MoviesService, private router: Router, private notificationService: NotificationService) { 
    } 

    ngOnInit() { 
     this.GetMovies(); 
    } 


    AddMovie() { 
     this.router.navigate(['/newmovie']); 
    } 

    GetMovies() { 
     this._moviesService.getMovies().subscribe(p => { 
      this.movies = p; 
     }); 
    } 

    SelectMovie(mv: any) { 
     this.selectedMovie = mv; 
    } 

    removeMovieV2(val: any) { 
     this._moviesService.deleteMovie(val).subscribe(res => { 
      this.notificationService.printSuccessMessage(val.MovieName + ' has been deleted.'); 
      this.GetMovies(); 
     }, error => { 
      this.notificationService.printErrorMessage(error); 
     }); 
    } 
} 

Answer 1

Я думаю, вам нужно использовать атрибут привязки вместо объекта привязки для boostrap, чтобы получить значение

attr.data-id="{{mv.MovieName}}" 

(только для строк)

или

[attr.data-id]="mv.MovieName" 

(также поддерживает объекты)