如何解决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})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。