如何在 Angular 中从本地 Web API (ASP.NET Core) 获取数据答案

【问题标题】：How to get data from local Web API (ASP.NET Core) in Angular如何在 Angular 中从本地 Web API (ASP.NET Core) 获取数据
【发布时间】：2021-05-15 12:03:29
【问题描述】：

这是我生成数据以创建 Treeview 时的代码：

import { Injectable } from '@angular/core';
export class Product {
     id: string;
     text: string;
     expanded?: boolean;
     items?: Product[];
     price?: number;
     image?: string;
}

我在 Angular 中这样创建数据：

var products: Product[] = [{
id: "1",
text: "Stores",
expanded: true,
items: [{
    id: "1_1",
    text: "Super Mart of the West",
    expanded: true,
    items: [{
        id: "1_1_1",
        text: "Video Players",
        items: [{
            id: "1_1_1_1",
            text: "HD Video Player",
            price: 220,
            image: "images/products/1.png"
        }, {
            id: "1_1_1_2",
            text: "SuperHD Video Player",
            image: "images/products/2.png",
            price: 270
        }]
    }, {
        id: "1_1_2",
        text: "Televisions",
        expanded: true,
        items: [{
            id: "1_1_2_1",
            text: "SuperLCD 42",
            image: "images/products/7.png",
            price: 1200
        }, {
            id: "1_1_2_2",
            text: "SuperLED 42",
            image: "images/products/5.png",
            price: 1450              
        }
            ...
        }]
    }

这是我在 Angular 中运行的输出：

而且我不想用这种方式来设置数据。我可以通过 localhost Web API（从 ASP.NET Core 创建）获取数据吗？

感谢您的所有帮助。我只是一个使用 Angular 的新手（如果我的问题很愚蠢，请原谅我）！！

【问题讨论】：

Angular 文档中有一节介绍使用 HttpClient 使用后端服务。

标签： c# angular asp.net-core-webapi

【解决方案1】：

我不想用这种方式来设置数据。我可以通过 localhost Web API（从 ASP.NET Core 创建）获取数据吗？

如果您想从 Angular 前端向 API 后端发出 http 请求以获取数据，正如评论中提到的@DM，您可以尝试使用 HttpClient。

注入 HttpClient 服务

import { HttpClient } from '@angular/common/http';

发出 http 请求

products: Product[];

GetProducts() {
    this.http.get<Product[]>('https://localhost:44386/api/nodeitems')
    .subscribe(data => {
      this.products = data;
    });
}

此外，您可能需要在 API 后端应用上启用 CORS 以设置允许的来源。

https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-5.0

【讨论】：