我正在尝试创建一个页面，以显示从数据库返回的所有值。它应使用ngFor显示表行中的所有数据，并且当双击该行或单击该行左侧的编辑按钮时，应使用一个充满输入字段的ng-template替换该行，方法是调用.ts文件中的editMovie()函数。
问题是，当应调用editMovie()时，我在控制台中收到此错误。
我看到双击行(请参见html的第20行)和单击编辑按钮(请参见html的第52行)时均会引发此错误。这使我相信问题与.ts文件有关。我也将console.log()放在editMovie()的第一行中，但未显示，这使我相信在实际运行editMovie之前会抛出错误。
movie.component.html
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="movies" *ngIf="moviesList">
<table class="table">
<thead class="h">
<tr class="h">
<th class="h">Title</th>
<th class="h">Genre</th>
<th class="h">Description</th>
<th class="h">Date Released</th>
<th class="h">Link</th>
<th class="h">Seen</th>
<th class="h">Options</th>
</tr>
</thead>
<tbody>
<tr class="movie" (dblclick)="editMovie(movie)" *ngFor="let movie of moviesList">
<ng-container *ngIf="!editMovies.includes(movie); else editMovie">
<td>{{movie.title}}</td>
<td>{{movieGenres[movie.genre - 1].Name}}</td>
<td>{{movie.description}}</td>
<td>{{movie.dateMade | date}}</td>
<td>{{movie.link}}</td>
<td>{{movie.seen}}</td>
</ng-container>
<ng-template #editMovie>
<td><input type="text" name="title" id="title" (keypress)="submitMovie($event, movie)" [(ngModel)]="movie.title" placeholder="Title" class="form-control"></td>
<td><select name="genre" id="genre" [(ngModel)]="movie.genre" class="form-control">
<option *ngFor="let genre of movieGenres" [ngValue]="genre.Value">
{{genre.Name}}
</select></td>
<td><input type="text" name="description" id="description" (keypress)="submitMovie($event, movie)" [(ngModel)]="movie.description" placeholder="Description" class="form-control"></td>
<td><input type="date" name="dateMade" id="dateMade" (keypress)="submitMovie($event, movie)" [(ngModel)]="movie.dateMade" placeholder="Date Released" class="form-control"></td>
<td><input type="text" name="link" id="link" (keypress)="submitMovie($event, movie)" [(ngModel)]="movie.link" placeholder="Link"class="form-control"></td>
<td>
<input type="text" name="seen" id="seen" (keypress)="submitMovie($event, movie)" [(ngModel)]="movie.seen" placeholder="Seen?" class="form-control">
</td>
</ng-template>
<td class="o">
<button class="btn btn-success" (click)="seenMovie(movie)" *ngIf="movie.seen == false">
<i class="fa fa-check"></i>
</button>
<button class="btn btn-danger" (click)="seenMovie(movie)" *ngIf="movie.seen == true">
<i class="fa fa-times"></i>
</button>
<button class="btn btn-primary" (click)="editMovie(movie)">
<i class="fa fa-pencil"></i>
</button>
<button class="btn btn-danger" (click)="deleteMovie(movie)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<form>
<div class="form-row">
<div class="col-md-5">
<input type="text" name="title" id="title" [(ngModel)]="newMovie.title" placeholder="Title" class="form-control">
</div>
<div class="col-md-5">
<select name="genre" id="genre" [(ngModel)]="newMovie.genre" class="form-control">
<option *ngFor="let genre of movieGenres" [ngValue]="genre.Value">
{{genre.Name}}
</select>
</div>
<div class="col-md-5">
<input name="description" id="description" [(ngModel)]="newMovie.description" placeholder="Description" class="form-control">
</div>
<div class="col-md-5">
<input type="date" name="dateMade" id="dateMade" [(ngModel)]="newMovie.dateMade" placeholder="Date Released" class="form-control">
</div>
<div class="col-md-5">
<input name="link" id="link" [(ngModel)]="newMovie.link" placeholder="Link" class="form-control">
</div>
<div class="col-md-5">
<input name="seen" id="seen" [(ngModel)]="newMovie.seen" placeholder="Seen?" class="form-control">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary" (click)="create()">Add</button>
</div>
</div>
</form>
</div>
<div class="col-md-2">
</div>
</div>
movie.component.ts
import { Response } from '@angular/http';
import { MovieService } from '../services/movie.service';
import Movie from '../models/movie.model';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-movie',
templateUrl: './movie.component.html',
styleUrls: ['./movie.component.scss']
})
export class MovieComponent implements OnInit {
constructor(
private movieService: MovieService
) { }
movieGenres = [
{
Name: "Action",
Value: 1
},
{
Name: "Comedy",
Value: 2
},
{
Name: "Drama",
Value: 3
},
{
Name: "Sci Fi",
Value: 4
}
];
//Declaring the new todo Object and initilizing it
public newMovie: Movie = new Movie()
//An Empty list for the visible todo list
moviesList: Movie[];
editMovies: Movie[] = [];
ngOnInit(): void {
this.movieService.getMovies()
.subscribe(movies => {
this.moviesList = movies
})
}
create() {
this.movieService.createMovie(this.newMovie)
.subscribe((res) => {
this.moviesList.push(res.data)
this.newMovie = new Movie()
})
}
editMovie(movie: Movie) {
if(this.moviesList.includes(movie)){
if(!this.editMovies.includes(movie)){
this.editMovies.push(movie)
}else{
this.editMovies.splice(this.editMovies.indexOf(movie), 1)
this.movieService.editMovie(movie).subscribe(res => {
console.log('Update Succesful')
}, err => {
this.editMovie(movie)
console.error('Update Unsuccesful')
})
}
}
}
seenMovie(movie:Movie){
movie.seen = true
this.movieService.editMovie(movie).subscribe(res => {
console.log('Update Succesful')
}, err => {
this.editMovie(movie)
console.error('Update Unsuccesful')
})
}
unseenMovie(movie:Movie){
movie.seen = false
this.movieService.editMovie(movie).subscribe(res => {
console.log('Update Succesful')
}, err => {
this.editMovie(movie)
console.error('Update Unsuccesful')
})
}
submitMovie(event, movie:Movie){
if(event.keyCode ==13){
this.editMovie(movie)
}
}
deleteMovie(movie: Movie) {
this.movieService.deleteMovie(movie._id).subscribe(res => {
this.moviesList.splice(this.moviesList.indexOf(movie), 1);
})
}
}
最佳答案
模板引用变量(#editMovie)和方法viz具有相同的名称。 editMovie 。回覆