.NET Core MVC+Angular项目：Angular无法显示数组参数描述的问题

一、先检查后端模型的注释配置 #

确保数组属性上正确添加了描述注解，别把注解加错地方——如果是数组本身的描述，要直接加在数组属性上；如果是数组元素的描述，才需要加到子对象模型的属性里。

示例代码：

public class CreateServiceObjectModel
{
    // 单个参数示例
    [Display(Description = "服务名称")]
    public string ServiceName { get; set; }

    // 数组参数，直接在属性上加描述
    [Display(Description = "关联的用户ID列表")]
    public List<int> UserIds { get; set; }

    // 自定义对象数组，数组本身和子元素都可加描述
    [Display(Description = "服务配置项集合")]
    public List<ServiceConfig> Configs { get; set; }
}

public class ServiceConfig
{
    [Display(Description = "配置键名")]
    public string Key { get; set; }
}

二、验证API返回的描述数据 #

后端要确保把数组属性的描述信息序列化返回给前端。可以通过反射获取属性的描述，封装到返回结果里，避免序列化时丢失。

示例获取描述的工具方法：

public static string GetPropDescription(PropertyInfo prop)
{
    var displayAttr = prop.GetCustomAttribute<DisplayAttribute>();
    return displayAttr?.Description ?? prop.GetCustomAttribute<DescriptionAttribute>()?.Description ?? prop.Name;
}

// 在API接口中封装描述数据
var modelType = typeof(CreateServiceObjectModel);
var descDict = modelType.GetProperties()
    .ToDictionary(p => p.Name, p => GetPropDescription(p));

return Ok(new { FormModel = new CreateServiceObjectModel(), PropDescriptions = descDict });

三、调整Angular模板逻辑 #

前端模板要确保能正确读取数组属性的描述，别只处理非数组字段。比如遍历属性时，直接通过属性名从描述字典里取值，不管是不是数组。

示例Angular模板代码：

<div class="param-item" *ngFor="let prop of formProps">
  <label>{{ prop.label }}</label>
  <!-- 直接通过属性名读取描述，数组和单个参数逻辑一致 -->
  <small class="desc-text">{{ propDescriptions[prop.name] }}</small>

  <!-- 如果需要显示数组子元素的描述，额外判断类型 -->
  <div *ngIf="prop.type === 'array'">
    <small class="sub-desc">子项描述：{{ propDescriptions[prop.elementTypeName] }}</small>
  </div>
</div>

四、快速排查点 #

1. 打开浏览器控制台，查看API返回的JSON，确认数组属性的描述字段是否存在；
2. 检查Angular组件中是否正确订阅了API返回的描述数据，有没有把数据赋值给模板可用的变量；
3. 如果用了表单控件，确认构建数组控件时，描述信息也被关联到控件实例上。

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