Getting “ERROR TypeError: jit_nodeValue_6(…) is not a function” when I try to run a method with ngIf

Question

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.

The problem is that, when editMovie() should be called, I'm getting this error in the console.

ERROR TypeError: jit_nodeValue_6(...) is not a function

at Object.eval [as handleEvent] (MovieComponent.html:52)

at handleEvent (core.js:21673)

at callWithDebugContext (core.js:22767)

at Object.debugHandleEvent [as handleEvent] (core.js:22470)

at dispatchEvent (core.js:19122)

at core.js:19569

at HTMLButtonElement. (platform-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)

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). This leads me to believe that the issue is with the .ts file. 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.

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);
      })
    }

}

Answer 1

You are having same name for template reference variable (#editMovie) and method viz. editMovie . Re