[英]Getting “ERROR TypeError: jit_nodeValue_6(…) is not a function” when I try to run a method with ngIf
I am trying to create a page that displays all of the values returned from my database. 我正在尝试创建一个页面,显示从我的数据库返回的所有值。 It should display all of the data in table rows using ngFor and it should replace the row with an ng-template full of input fields when the row is double clicked or when the edit button to the left of the row is clicked, by calling the editMovie() function in the .ts file. 它应该使用ngFor显示表行中的所有数据,并且当双击行或者单击行左侧的编辑按钮时,它应该用一个充满输入字段的ng-template替换行,通过调用.ts文件中的editMovie()函数。
The problem is that, when editMovie() should be called, I'm getting this error in the console. 问题是,当应该调用editMovie()时,我在控制台中收到此错误。
ERROR TypeError: jit_nodeValue_6(...) is not a function 错误TypeError:jit_nodeValue_6(...)不是函数
at Object.eval [as handleEvent] (MovieComponent.html:52) 在Object.eval [as handleEvent](MovieComponent.html:52)
at handleEvent (core.js:21673) at handleEvent(core.js:21673)
at callWithDebugContext (core.js:22767) at callWithDebugContext(core.js:22767)
at Object.debugHandleEvent [as handleEvent] (core.js:22470) at Object.debugHandleEvent [as handleEvent](core.js:22470)
at dispatchEvent (core.js:19122) at dispatchEvent(core.js:19122)
at core.js:19569 at core.js:19569
at HTMLButtonElement. 在HTMLButtonElement。 (platform-browser.js:993) (平台browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:16147) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) 在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask(zone.js:421),位于ZoneDelegate.push ../ node_modules / zone的Object.onInvokeTask(core.js:16147) .js / dist / zone.js.ZoneDelegate.invokeTask(zone.js:420)
I'm seeing this error thrown both when the row is double clicked (see line 20 of the html) and when the edit button is clicked (see line 52 of the html). 当双击行时(参见html的第20行)和单击编辑按钮时(参见html的第52行),我看到这个错误都被抛出了。 This leads me to believe that the issue is with the .ts file. 这让我相信问题出在.ts文件中。 I also put a console.log() in the first line of editMovie() and it did not show, leading me to believe that the error is being thrown before editMovie is actually run. 我还在editMovie()的第一行放了一个console.log(),它没有显示,导致我认为在editMovie实际运行之前抛出了错误。
movie.component.html 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 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);
})
}
}
You are having same name for template reference variable (#editMovie) and method viz. 模板引用变量(#editMovie)和方法viz具有相同的名称。 editMovie . editMovie 。 Re 回覆
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.