Достижение успешной должности ()

Question

Я создаю приложение Angular2 + с .NET RESTful API.После нажатия кнопки «Сохранить» после добавления элементов рецепта в консоли появляется сообщение об ошибке.Кажется, что Post () работает неправильно.

Компонент добавления рецепта (.html)

<h1>Add a Recipe</h1>
<form class="form-inline">
    <label class="sr-only" for="recipeTitle">Recipes</label>
    <div class="input-group mb-2 mr-sm-2">
      <input type="text" class="form-control" id="recipeTitle" name="recipeTitle" placeholder="Recipe Title" [(ngModel)]="title">
    </div>

    <label class="sr-only" for="count">Ingredient</label>
    <input type="number" class="form-control mb-2 mr-sm-2" id="count" name="count" placeholder="Count" [(ngModel)]="count">

    <label class="sr-only" for="ingredient">Recipes</label>
    <div class="input-group mb-2 mr-sm-2">
      <input type="text" class="form-control" id="ingredient" name="ingredient" placeholder="Ingredient" [(ngModel)]="ingredient">
    </div>
    <p>the count: {{ itemCount }}</p>

    <input type="submit" class="btn btn-primary mb-2" value="Add" (click)="addIngredient()">
  </form>
  <h2>My Ingredients</h2>
    <ul class="list-group">
      <li class="list-group-item" *ngFor="let ingredient of ingredientsArray">
          <span class="badge">{{ ingredient.count }}</span> {{ ingredient.ingredient }}

      </li>
    </ul>

<button type="button" class="btn btn-primary" (click)="saveRecipe()">Save</button>
<button type="button" class="btn btn-danger">Cancel</button>

Добавление кода рецепта за

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-add-recipe',
  templateUrl: './add-recipe.component.html',
  styleUrls: ['./add-recipe.component.css']
})
export class AddRecipeComponent implements OnInit {
  itemCount: number;
  count: number;
  ingredient: string = '';
  title: string = '';
  ingredientsArray = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.itemCount = this.ingredientsArray.length;
  }

  addIngredient() {
    this.ingredientsArray.push({ count: this.count, ingredient: this.ingredient });
    this.ingredient = '';
    this.itemCount = this.ingredientsArray.length;
    this.count = null;
  }

  saveRecipe() {
    this.http.post('api/recipes', 
      { title: this.title, ingredients: this.ingredientsArray, itemCount: this.itemCount })
      .subscribe((res: Response) => {
        console.log('should be saved');

      });
  }
}

Контроллер

[HttpPost]
        public IActionResult Post(string title, List<IngredientsController> ingredients)
        {
            return Ok();
        }

Вроде все настроено так, как должно быть, но я получаю огромную ошибку в консоликак будто это не доходит.Сообщение об ошибке гласит сообщение

: «Http-сообщение об ошибке для https://localhost:5001/api/recipes: 404 не найдено»

ингридиенты.ts

export class Ingredient {
    count: number;
    ingredient: string;
  }

Мне не нужно создавать страницу?Нужно ли создавать какой-то компонент, который перенаправляет на этот URL?

Answer 1

Здесь несколько точек ошибки

1) При использовании Http Post все параметры должны передаваться как «единая» полезная нагрузка.Следовательно, вам нужно создать выделенный класс для каждого типа полезной нагрузки в вашем приложении и создать JSON в клиентском коде, чтобы соответствовать ему.Например, в этом случае ваш класс будет выглядеть следующим образом: -

public class Input
{
    public string Title { get; set; }

    /* Your code refers this to IngredientsController list, 
     * However it should be Ingrediends as you don't intend to create a list of actual controllers. 
     * Please check*/
    public List<Ingredients> Ingredients { get; set; }

    public int ItemCount { get; set; }
}

Обычно корпус по умолчанию использует верблюжий случай при использовании JSON, но при желании вы можете изменить его на случай Паскаля, изменив форматер(только для того, чтобы убедиться, что вы в конечном итоге указали правильные имена полей JSON)

2) Используемый вами URL-адрес - «api / receies», но в вашем маршруте вы, возможно, пропустили оформление URL-адреса через RouteName или RoutePrefix (если этоявляется маршрутизацией на основе атрибутов).Если это маршрутизация на основе соглашения, убедитесь, что имя вашего контроллера на стороне сервера - «Рецепты», поскольку в маршруте возникнет ошибка.(Кстати, можете ли вы совершать какие-либо звонки на контроллер?

3) Не беспокойтесь о «https» против «http», это связано с тем, что у вас есть сертификат сервераустановлен и используется (команда ng serve --ssl) и, следовательно, угловой модуль http использует https вместо http.

Если это не помогает, пожалуйста, опубликуйте код контроллера (просто удалите приватные и другие методы)и любые другие ошибки, которые вы получаете.

Answer 2

404 код состояния обычно указывает на то, что URL, который вы пытаетесь использовать, не найден, и проблема не на стороне сервера, а на стороне клиента.Маршрут, по которому вы пытаетесь перейти, - https://localhost:5001/api/recipes, Я не думаю, что localhost должен иметь https в качестве протокола, localhost должен быть http.Поэтому из-за этого локальный хост не найден, вы должны изменить его на http://localhost:5001/api/recipes. Дайте мне знать, если это работает для вас.