javascript - 删除函数错误Angular 6返回未定义

Question

我正在尝试编写一个删除函数来从我的对象中删除电影。

这是我的代码，但是当我单击删除按钮时，我收到 DELETE: Error。

您认为我的代码中有什么错误？

您可以在这里查看我的代码...

电影模型.ts

export class Movie {
  Id: number;
  Title: string;
  Year: number;
  Runtime: string;
  Genre: string;
  Director: string;
}

数据.service.ts

import { Movie } from './model/movie.model';

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }
  baseUrl: string = 'http://localhost:4200/';

  getMovies() {
    return fetch('https://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b').then(function (resp) {
      return resp.json()
    });
  }

  createMovie(movie:Movie) {
    return this.http.post(this.baseUrl, movie);

  }

  deleteMovie(movie:Movie){
    return this.http.delete(this.baseUrl + movie.Id);
  }


}

电影列表.component.ts

import { DataService } from './../data.service';
import { Movie } from './../model/movie.model';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {

  movies = [
    {Id:1, Title: 'Avatar', Year: '2009'},
    {Id:2, Title: 'Harry Potter', Year: '2001'},
    {Id:3, Title: 'Spiderman 3', Year: '2007'}
  ];

  constructor(private dataService:DataService){}

  ngOnInit() {
    this.getMovie().then(dt => {
      this.movies.push(dt);

    })
  }

  getMovie() {
    return fetch('https://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b').then(function (resp) {
      return resp.json()
    });
  }

  deleteMovie(movie: Movie): void {
    this.dataService.deleteMovie(movie.Id)
      .subscribe( data => {
        this.movies = this.movies.filter(u => u !== movie);
      })
  };
}

这是我得到的错误...

我该怎么做才能让删​​除按钮起作用并向我发出警报，然后将其自身从对象中删除？

Answer 1

您尝试访问实际运行 Angular 应用程序的端点:baseUrl: string = 'http://localhost:4200/';这是您的 Angular 应用程序在您的计算机上的默认端口本地计算机，并且我猜您尝试调用外部 REST API 的删除端点。

但是其余服务不会在端口 4200 上的本地主机上运行，​​这就是为什么您会收到 404 not found 的原因。我认为您必须在此端点上调用删除https://www.omdbapi.com。

编辑:

如果要从列表中删除电影，则必须删除数组中的条目。最简单的方法是将 id 属性更改为 imdbID，因为 omdbapi 的响应类型没有 id 属性，这意味着您的 id 将始终未定义。然后当你想删除一个条目时，你可以这样做:

 deleteMovie(imdbID: string): void {
    this.movies = this.movies.filter(m => m.imdbID !== imdbID)
  };

这与您拥有的代码几乎相同，但没有对其余 api 进行删除调用。因为您不想从数据库中删除该条目，而只想在您的 Angular 应用程序上删除该条目。