Получение «ERROR TypeError: jit_nodeValue_6 (...) is not a function», когда я пытаюсь запустить метод с ngIf

Я пытаюсь создать страницу, которая отображает все значения, возвращенные из моей базы данных. Он должен отображать все данные в строках таблицы с помощью ngFor, и он должен заменять строку ng-шаблоном, полным полей ввода, когда строка дважды щелкнута или когда нажата кнопка редактирования слева от строки, вызывая editMovie () в файле .ts.

Проблема в том, что при вызове editMovie () я получаю эту ошибку в консоли.

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)

Я вижу, что эта ошибка возникает как при двойном щелчке по строке (см. Строку 20 HTML), так и при нажатии кнопки редактирования (см. Строку 52 HTML). Это наводит меня на мысль, что проблема в файле .ts. Я также поместил console.info () в первую строку 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.info('Update Succesful')
         }, err => {
            this.editMovie(movie)
            console.error('Update Unsuccesful')
          })
        }
      }
    }

    seenMovie(movie:Movie){
      movie.seen = true
      this.movieService.editMovie(movie).subscribe(res => {
        console.info('Update Succesful')
      }, err => {
        this.editMovie(movie)
        console.error('Update Unsuccesful')
      })
    }

    unseenMovie(movie:Movie){
      movie.seen = false
      this.movieService.editMovie(movie).subscribe(res => {
        console.info('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);
      })
    }

}