Node.js & Express如何将后端响应发送至Angular前端？

Hey there! Let's work through this problem step by step—you're really close, just a couple of small tweaks needed on both the backend and frontend to get your file list showing up correctly.

Backend Fix: Send the Entire File Array (Not Individual Files) #

Your current Express code has a critical issue: you're calling res.send(file) inside a forEach loop. Once you send a response with res.send, the connection closes immediately—so only the first file gets sent, and Express will throw an error trying to send subsequent responses. Instead, we need to send the entire array of filenames in one go, and add error handling for cases where the directory doesn't exist or we don't have read permissions.

Here's the corrected backend code:

const path = require('path');
const { sanitizeFileName } = require('your-sanitization-package'); // 确保你导入了这个包

router.get('/files/:id/', function(req, res) {
  const fileUrl = path.join(SERVER, 'files', sanitizeFileName(req.params.id));
  
  fs.readdir(fileUrl, (err, files) => {
    // 先处理错误
    if (err) {
      return res.status(500).json({ 
        error: 'Failed to read directory', 
        details: err.message 
      });
    }
    
    // 一次性发送整个文件数组
    res.json(files);
  });
});

Frontend Fix: Use HttpClient Correctly & Subscribe to the Observable #

Your Angular code has a few issues:

1. 你用了较旧的 http.request，现在Angular推荐使用 HttpClient（来自 @angular/common/http）。
2. map 操作符里没有返回解析后的JSON（漏掉了 return 语句）。
3. 你没有订阅Observable——Observable是惰性的，只有订阅后才会执行请求。
4. HttpClient 会自动解析JSON响应，不需要手动调用 JSON.parse。

Here's the corrected frontend code:

Component Class (e.g., FilesComponent.ts) #

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-files',
  templateUrl: './files.component.html',
  styleUrls: ['./files.component.css']
})
export class FilesComponent implements OnInit {
  id: string = 'your-target-directory-id'; // 替换成实际的目录ID（比如从路由参数获取）
  files: string[] = []; // 用来存储所有文件名

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.fetchFiles();
  }

  fetchFiles(): void {
    const apiUrl = `/files/${this.id}`; // 和后端接口地址匹配
    
    this.http.get<string[]>(apiUrl).subscribe({
      next: (fetchedFiles) => {
        this.files = fetchedFiles;
      },
      error: (error) => {
        console.error('Error loading files:', error);
        // 可以在这里添加用户友好的错误提示
      }
    });
  }
}

Component Template (e.g., FilesComponent.html) #

用 *ngFor 遍历 files 数组，展示每个文件名：

<div class="files">
  <p>Files in {{ id }} directory:</p>
  <p *ngFor="let file of files">&gt;{{ file }}</p>
</div>

Key Notes to Remember #

• 前后端都要处理错误——这能帮你排查目录不存在、权限不足之类的问题。
• Angular的Observable必须订阅才会执行请求；没有 subscribe() 的话，你的HTTP请求永远不会发起。
• Express里的 res.json() 会自动设置正确的JSON响应头，让Angular更容易解析数据。

内容的提问来源于stack exchange，提问作者bobdolan