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

Question

这是我生成数据以创建 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 中运行的 output：

而且我不想用这种方式来设置数据。 我可以通过从本地主机 web API（从 ASP.NET 核心创建）获取数据吗？

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

Answer 1

我不想用这种方式来设置数据。 我可以通过从本地主机 web API（从 ASP.NET 核心创建）获取数据吗？

如果您想从您的 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