angular - 如何使用http方法获取Angular中的文件列表

Question

我迈出了进入 Angular 的第一步，但我一直坚持在 ClientApp 中列出所有文件。

我有一个 C# 上的 Web Api 和 GET 请求，显示文件夹中的所有文件，但我不知道如何在 Angular 中显示该数组。

[HttpGet]
    [Route("/getAllFiles")]
    public IEnumerable<string> GetAllFiles()
    {
        string folderName = "Upload";
        string webRootPath = _hostingEnvironment.WebRootPath;
        string newPath = Path.Combine(webRootPath, folderName);
        List<string> files = new List<string>();
        DirectoryInfo dirInfo = new DirectoryInfo(newPath);
        foreach (FileInfo fInfo in dirInfo.GetFiles())
        {
            files.Add(fInfo.Name);
        }
         return files.ToArray();
    }

我正在尝试使用这种方法，但我认为我错了

return this.http.get(`https://localhost`)

Answer 1

这更像是一个 API 服务器配置 ASP.NET 路由问题，而不是真正的 Angular 问题。

端口号

首先，您需要知道 API 服务器运行的端口。

端口是这样写的:https://localhost:portnumber，比如https://localhost:8080

正确的路线

其次，在您的 C#/ASP.NET API 代码中，您的路由被指定为 [Route("/getAllFiles")] 。这意味着，如果你想转到这个 C# 函数，你需要攻击这个特定的 URL，就像这样:

https://localhost:portnumber/getAllFiles

订阅观察

(根据您最后的评论，这似乎不是您的问题)

第三，angular http 服务的 get 方法返回一个 Observable，你应该订阅它或者你想实际发送一个请求。

const url = 'https://localhost:portnumber/getAllFiles';
this.http.get(url).subscribe(
    (result) => { 
         console.log(result); 
         // here you can assign the result to some private variable of your component,
         // and bind this variable to your template somehow
    },
    (error) => { console.log('an error occured!'); console.log(error); }
)