當我嘗試使用ngIf運行方法時，獲取“ERROR TypeError：jit_nodeValue_6（...）不是函數”

Question

我正在嘗試創建一個頁面，顯示從我的數據庫返回的所有值。 它應該使用ngFor顯示表行中的所有數據，並且當雙擊行或者單擊行左側的編輯按鈕時，它應該用一個充滿輸入字段的ng-template替換行，通過調用.ts文件中的editMovie（）函數。

問題是，當應該調用editMovie（）時，我在控制台中收到此錯誤。

錯誤TypeError：jit_nodeValue_6（...）不是函數

在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

在HTMLButtonElement。 （平台browser.js：993）

在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）

當雙擊行時（參見html的第20行）和單擊編輯按鈕時（參見html的第52行），我看到這個錯誤都被拋出了。 這讓我相信問題出在.ts文件中。 我還在editMovie（）的第一行放了一個console.log（），它沒有顯示，導致我認為在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);
      })
    }

}

Answer 1

模板引用變量（#editMovie）和方法viz具有相同的名稱。 editMovie 。 回覆