ASP.NET WebAPI和Angular集成找不到收藏

问题描述

首先，对不起我的英语。 我正在尝试将asp.net Web API与Angular集成。目前，我只实现了get方法，当我在Angular中调用它时，总是会收到404错误。有谁知道如何解决？
WebApiConfig.cs

    public static class WebApiConfig {
    public static void Register(HttpConfiguration config) {
        // Servizi e configurazione dell'API Web
        var cors = new EnableCorsAttribute(origins: "*",headers: "*",methods: "*");
        config.EnableCors(cors);

        // Route dell'API Web
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",routeTemplate: "api/{controller}/{id}",defaults: new { id = RouteParameter.Optional }
        );
        config.Formatters.Remove(config.Formatters.XmlFormatter);
        config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
        config.Formatters.JsonFormatter.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Utc;
  
    }
}

Products.cs

    public class Product {
    public string id { get; set; }
    public string name { get; set; }
    public string description { get; set; }
    public double price { get; set; }
    public int qta { get; set; }

    public List<Product> GetAll() {
        List<Product> productsList = new List<Product>() {
            new Product { id = "id1",name = "prodotto1",description = "descrizione 1",price = 123.42,qta = 4 },new Product { id = "id2",name = "prodotto2",description = "descrizione 2",price = 13.42,new Product { id = "id3",name = "prodotto3",description = "descrizione 3",price = 12.45,qta = 2 },new Product { id = "id4",name = "prodotto4",description = "descrizione 4",price = 23,qta = 7 },new Product { id = "id5",name = "prodotto5",description = "descrizione 5",price = 63.99,qta = 5 }
        };
        return productsList;
    }

    public Product GetProduct(string id) {
        return GetAll().Where(x => x.id == id).FirstOrDefault();
    }
}

ProductController.cs

    [EnableCors(origins: "*",methods: "*")]
public class ProductController : ApiController
{
    [HttpGet]
    public IEnumerable<Product> Get() {
        return new Product().GetAll();
    }
}

WebApiService.ts

@Injectable({


 providedIn: 'root'
})
export class WebapiService {

  constructor(private http: HttpClient) {
  }

  public getValue() {
    return this.http.get<any[]>('http://localhost:44342/api/Product');
  }
}

WebApiTestComponent

  export class WebApiTestComponent implements OnInit {
  value: any[] = [];

  constructor(public webApi: WebapiService) { }

  ngOnInit(): void {
    this.webApi.getValue().subscribe(data => {
      console.log(data);
      this.value = data;
    });
  }

那是错误：

解决方法

我发现了问题。代码正确。问题出在Angular项目中。在这个项目中，我在另一个组件中使用InMemoryWebApi，并且两件事发生了冲突。因此，为解决此问题，我在AppModule中添加了passThruUnknownUrl选项。

InMemoryWebApiModule.forRoot(AppData,{delay: 1000,passThruUnknownUrl: true})