TypeScript根据前端下拉选择获取对应数据库Folder值的问题排查

你的核心问题在于加载数据时的逻辑错误，以及未正确监听下拉框选择事件，导致无法获取选中项对应的Folder字段。以下是具体修复方案：

问题分析 #

1. 你在forEach循环中反复给this.selectedCategory赋值为当前循环项的Id，循环结束后它只会等于最后一个分类的Id，完全忽略用户实际选中的项。
2. 加载数据时的if (category.Id === this.selectedCategory)判断无意义——你刚把selectedCategory设为当前项的Id，必然成立，最终foldername只会是最后一个分类的Folder。
3. console.log里的+ this.foldername会强制把字符串转为数字，可能导致Folder路径丢失或输出NaN。

修复步骤 #

1. 移除加载数据时的无效逻辑：加载数据仅需渲染分类列表到下拉框，无需提前选中最后一项或赋值Folder。
2. 添加下拉框选择事件监听：用户选中选项时，再根据选中的Id匹配对应分类，取出Folder字段。
3. 修正console.log的错误写法：去掉多余的+号。

修改后的代码 #

loadResourceCategory() {
  this.categories = new Array<ResourceCategory>();
  this.isLoading = true;

  return this.resourceService.getResources()
    .then((categories: Array<ResourceCategory>) => {
      this.categories = categories;
      // 仅给每个分类设置展示用的details字段
      this.categories.forEach((category: any) => {
        category.details = `${category.Name}`;
      });
      // 如需默认选中第一项，可取消下方注释
      // if (this.categories.length > 0) {
      //   this.selectedCategory = this.categories[0].Id;
      //   this.foldername = this.categories[0].Folder;
      // }
    })
    .catch(() => {
      this.modalService.error('资源加载失败，请稍后重试');
    })
    .finally(() => {
      this.isLoading = false;
    });
}

// 下拉框选择事件处理函数（根据你的前端框架调整事件绑定方式，比如Angular的(change)）
onCategorySelect() {
  // 根据选中的Id匹配对应分类
  const selected = this.categories.find(category => category.Id === this.selectedCategory);
  if (selected) {
    this.foldername = selected.Folder;
    console.log('选中分类的文件夹路径:', this.foldername);
  }
}

前端模板补充（以Angular为例） #

在下拉框标签上绑定选择事件：

<select [(ngModel)]="selectedCategory" (change)="onCategorySelect()">
  <option *ngFor="let category of categories" [value]="category.Id">{{category.Name}}</option>
</select>

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