Question

我正在使用.NET RESTful API构建Angular2 +应用程序。添加配方项目后单击“保存”后，控制台中将显示错误消息。似乎不是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”

ingredients.ts

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

我还没有创建页面吗？我需要创建某种可以路由到该网址的组件吗？

Answer 1

404状态码通常表示未找到您要命中的url，问题不在服务器端，而是在客户端。您尝试访问的路由为https://localhost:5001/api/recipes，我认为本地主机不应该使用https作为协议，本地主机应该是http。因此，由于未找到本地主机，因此应将其更改为http://localhost:5001/api/recipes。让我知道这是否适合您。

Answer 2

这里有多个错误点

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）您使用的网址是“ api / recipies”，但是在您的路由中，您可能错过了通过RouteName或RoutePrefix（如果这是基于属性的路由）来装饰网址。如果这是基于约定的路由，请确保您的服务器端控制器名称为“ Recipes”，因为路由中的任何差异都将失败。（顺便说一下，您是否可以对控制器进行任何调用？

3）不必担心“ https”和“ http”，这是由于您已经安装并使用了服务器证书（ng serve --ssl命令），因此使用了角度http模块https，而不是http。

如果这无济于事，请发布您的控制器代码（只需删除私有方法和其他方法）以及任何其他错误。

实现成功的Post（）

2 个答案: