Question

我是角度2的新手。我正在尝试做简单的crud操作。但是我使用bootstrap模式有问题。下面的代码打开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

我认为您需要使用属性绑定而不是使用属性绑定来获取值

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

（仅限字符串）

或

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

（也支持对象）

Angular 2 bootstrap模态传递数据

1 个答案: