员工信息面板 - 修复完成 ✅

问题描述

编译错误：

Property 'Array' does not exist on type 'EmployeeInfoPanelComponent'.

出现在第 684 行，模板中使用了 Array.isArray() 但组件类中没有暴露 Array 对象。

解决方案

在 EmployeeInfoPanelComponent 类中添加 Array 属性：

export class EmployeeInfoPanelComponent implements OnInit, OnChanges {
  // 暴露 Array 给模板使用（用于 Array.isArray() 判断）
  Array = Array;  // ✅ 添加这一行
  
  // ... 其他属性
}

为什么需要这样做？

在 Angular 模板中，我们无法直接访问全局的 JavaScript 对象（如 Array、Object、Math 等）。如果模板需要使用这些全局对象的方法，必须在组件类中将它们暴露为属性。

在能力问卷部分的模板中（第 684 行），有这样的代码：

@else if (answer.type === 'multiple') {
  @if (Array.isArray(answer.answer)) {  <!-- 这里使用了 Array.isArray() -->
    @for (opt of answer.answer; track opt) {
      <span class="answer-tag multiple">{{ opt }}</span>
    }
  } @else {
    <span class="answer-tag single">{{ answer.answer }}</span>
  }
}

这段代码用于判断多选题的答案是否为数组类型，以便正确渲染。

参考

这个模式与 employee-detail-panel 组件保持一致：

// employee-detail-panel.ts
export class EmployeeDetailPanelComponent implements OnInit {
  // 暴露 Array 给模板使用
  Array = Array;  // ✅ 原组件也有这一行
  
  // ...
}

修改的文件

✅ yss-project/src/app/shared/components/employee-info-panel/employee-info-panel.component.ts

添加了 Array = Array; 属性

验证

✅ 编译错误已解决
✅ 没有其他 linter 错误
✅ 模板中的 Array.isArray() 可以正常使用

现在可以测试了！

访问 /admin/employees，点击任意员工，切换到"项目负载"标签页，查看能力问卷部分：

✅ 多选题答案应该正确显示为多个标签
✅ 单选题答案应该显示为一个标签
✅ 不会再有编译错误

🎉 所有问题已解决！

EMPLOYEE-INFO-PANEL-FIX-COMPLETE.md 2.1 KB 文件歷史 原始文件