javascript - 当我尝试使用 ngIf 运行方法时获取 "ERROR TypeError: jit_nodeValue_6(...) is not a function"

Question

我正在尝试创建一个页面来显示从我的数据库返回的所有值。它应该使用 ngFor 显示表行中的所有数据，并且当双击该行或单击该行左侧的编辑按钮时，它应该用充满输入字段的 ng 模板替换该行，通过调用.ts 文件中的 editMovie() 函数。

问题是，当应该调用 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)

我看到在双击该行(请参阅 html 的第 20 行)和单击编辑按钮(请参阅 html 的第 52 行)时都会抛出此错误。这让我相信问题出在 .ts 文件上。我还在 editMovie() 的第一行中放置了一个 console.log() 并且它没有显示，这让我相信错误是在 editMovie 实际运行之前抛出的。

电影.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>

电影.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

模板引用变量 (#editMovie) 和方法的名称相同。 编辑电影。回复