Question

我正在尝试编写删除功能以从对象中删除电影。

这是我的代码，但是当我单击删除按钮时，我得到DELETE：错误。

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

您可以在此处查看我的代码...

movie-model.ts

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

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


}

movie-list.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

在服务文件中，您创建了deleteMovie方法，该方法接受一个Movieobject

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

但是在Component movie-list.component.ts中，您正在通过delete方法传递id

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)    <- Your code error
    // Pass movie object 
       this.dataService.deleteMovie(movie)
      .subscribe( data => {
        this.movies = this.movies.filter(u => u !== movie);
      })
  };
}

Answer 2

您尝试访问实际运行角度应用程序的端点：baseUrl: string = 'http://localhost:4200/';这是本地计算机上角度应用程序的默认端口，并且尝试调用外部rest api的delete端点猜测。

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

编辑：

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

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

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

删除函数错误Angular 6返回undefined

2 个答案: