How do i send an object from Angular to an Asp.net Web Api?

Question

我的 Web Api 有異常

Object 引用未設置為 object 的實例。

object 中的數據打印到控制台，但不會傳遞給 Api Controller。 object ae s "null"

這是我的 controller：

[Route("api/AddMovie")]
[HttpPost]
public int AddMovie([FromBody]Movie movie)
{
   int check = objMovie.AddMovie(movie);
   return check;
}

AddMovie 是我為在數據庫中存儲數據而創建的 function。

這是我的組件：

import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { slideInOutAnimation } from 'src/app/animations';
import { Movie } from 'src/app/movie';
import { NgxSpinnerService} from 'ngx-spinner';
import { MovieServiceService } from 'src/app/Service/movie-service.service';
import { HttpClient } from '@angular/common/http';
import { formatNumber } from '@angular/common';

@Component({
  selector: 'app-addmovie',
  templateUrl: './addmovie.component.html',
  styleUrls: ['./addmovie.component.css'],
  // make slide in/out animation available to this component
  animations: [slideInOutAnimation],

  // attach the slide in/out animation to the host (root) element of this component
  // tslint:disable-next-line: no-host-metadata-property
  host: { '[@slideInOutAnimation]': '' }
})
export class AddmovieComponent implements OnInit {

  // tslint:disable-next-line: new-parens
  movie = new Movie;
  fileData: File = null;
  addMovieForm: FormGroup;


  constructor( 
    private spinner: NgxSpinnerService,
    public fb: FormBuilder,
    private http: HttpClient,
    public movieService: MovieServiceService) {
    this.addMovieForm = this.fb.group ({
      movieName: new FormControl('', [Validators.required, Validators.minLength(1)]),
      releaseDate: new FormControl('', [Validators.required]),
      releaseYear: new FormControl('' , [Validators.required]),
      certification: new FormControl('' , [Validators.required]),
      runtime: new FormControl('', [Validators.required]),
      rating: new FormControl('', [Validators.required, Validators.max(10)]),
      moviePlot: new FormControl('', [Validators.required, Validators.minLength(1)]),
      cast: new FormControl('', [Validators.required, Validators.minLength(1)]),
      imageName: new FormControl('', [Validators.required])
    });
  }

  ngOnInit() {
  }

  onFileSelect(event) {
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.addMovieForm.get('imageName').setValue(file);
    }
  }
  public onSubmit() {
    debugger;
    // tslint:disable-next-line: prefer-const
    let movieForm = this.addMovieForm.value;
    this.movie.movieName = movieForm.movieName;
    this.movie.releaseDate = movieForm.releaseDate;
    this.movie.releaseYear = movieForm.releaseYear;
    this.movie.certification = movieForm.certification;
    this.movie.runtime = movieForm.runtime;
    this.movie.review = movieForm.rating;
    this.movie.moviePlot = movieForm.moviePlot;
    this.movie.cast = movieForm.cast;
    this.movie.imageName = movieForm.imageName;
    console.log(this.movie);
    this.http.post('http://localhost:50686/api/AddMovie', this.movie).subscribe(
      (res) => console.log(res),
      (err) => console.log(err)
    );
}
}

Answer 1

您正在調用沒有任何 header 的 api 調用。 嘗試以下

const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
this.http.post('http://localhost:50686/api/AddMovie', this.movie, httpOptions)
.subscribe(
      (res) => console.log(res),
      (err) => console.log(err)
    );

Answer 2

該錯誤表明您的 object Movie是 null。 這意味着您尚未初始化 object，或者您已將其設置為 null。 在這種情況下，您可以執行以下操作，

1. 要在使用 object 之前對其進行初始化，

    Movie movie = new Movie();

2. 在使用 object 實例之前檢查 null，

    public int AddMovie([FromBody]Movie movie) { if (movie != null) { // Do something with movie } }

3. 處理null並拋出合適的異常，

    public int AddMovie([FromBody]Movie movie) { if (movie == null) { throw new Exception("Custom exception message"); } }