Angular 5 实现仅当字段存在时拼接字符串 解决安全导航null显示问题

你之前的写法存在两个核心问题，才会导致拼接结果带null值：

• 分隔符' - '是硬编码固定拼接在两个字段中间的，不受安全导航操作符控制
• 当group.GroupDescription?.S不存在时，JS的字符串拼接逻辑会自动将null/undefined转为字符串"null"，最终输出类似“基础用户组 - null”的无效内容。

方案1：模板内调整插值逻辑（无需改动TS代码） #

将分隔符和描述内容一起纳入条件判断范围，只有当GroupDescription.S存在有效值时，才拼接分隔符和描述文本，否则仅展示组名字段。
对应代码修改：

<select
  [(ngModel)]="selectedGroup"
  class="form-control"
  (ngModelChange)="onChange($event)"
>
  <option [ngValue]="undefined" selected>Select</option>
  <option *ngFor="let group of groups" [ngValue]="group">
    {{ 
      group.GroupName.S + (group.GroupDescription?.S ? ' - ' + group.GroupDescription.S : '')
    }}
  </option>
</select>

方案2：组件内封装辅助方法（模板更简洁） #

如果组件内多处需要用到组的展示文本，更推荐在TS代码中封装独立的拼接方法，避免模板中写过长的判断表达式：

1. 在组件类中新增处理方法：

   getGroupOptionLabel(group: any): string {
     const groupName = group.GroupName?.S ?? '';
     const groupDesc = group.GroupDescription?.S;
     // 存在有效描述时拼接分隔符和描述，否则仅返回组名
     return groupDesc ? `${groupName} - ${groupDesc}` : groupName;
   }
   

2. 模板中直接调用方法生成选项显示内容：

   <option *ngFor="let group of groups" [ngValue]="group">
     {{ getGroupOptionLabel(group) }}
   </option>
   

不要将分隔符单独硬编码在拼接链路中，否则即使描述字段不存在，分隔符依然会被保留出现无效内容，比如以下写法依然不符合预期：

<!-- 错误示例：描述不存在时，会输出"基础用户组 - "，带多余的分隔符尾巴 -->
{{ group.GroupName.S + ' - ' + (group.GroupDescription?.S || '') }}

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