Angular模板中联合类型IDialogConfig|IDialogConfig[]使用报错如何解决

Angular 模板的类型检查器默认无法根据*ngIf中的数组判断对联合类型做自动窄化，进入else分支后，config仍然被识别为IDialogConfig | IDialogConfig[]联合类型，访问fieldKey时会提示数组类型上不存在该属性。

方案1：统一转换为数组处理（最推荐） #

逻辑最简洁，完全消除分支判断，无类型安全问题：

1. 组件类中新增getter，把联合类型的config统一转为数组格式：

get configList(): IDialogConfig[] {
  return Array.isArray(this.config) ? this.config : [this.config];
}

2. 模板直接删除分支判断，仅保留循环逻辑即可：

<ng-container *ngFor="let message of configList">
  <p [fieldId]="message.fieldKey" class="display-4 confirm-msg"></p>
</ng-container>

方案2：使用类型谓词守卫（全类型安全，适合需要保留分支的场景） #

如果Angular版本 >=14，模板可以识别类型谓词的窄化结果，无需任何断言：

1. 组件类中定义类型守卫方法：

isConfigArray(config: IDialogConfig | IDialogConfig[]): config is IDialogConfig[] {
  return Array.isArray(config);
}

2. 模板中把判断条件替换为自定义类型守卫：

<ng-container *ngIf="isConfigArray(config); else singleMessage">
  <ng-container *ngFor="let message of config">
    <p [fieldId]="message.fieldKey" class="display-4 confirm-msg"></p>
  </ng-container>
</ng-container>
<ng-template #singleMessage>
  <!-- 此时config已被自动窄化为IDialogConfig类型，不会报错 -->
  <p [fieldKey]="config.fieldKey" class="display-4 confirm-msg"></p>
</ng-template>

方案3：安全类型断言（适合低版本Angular，轻量快速） #

低版本Angular不支持模板类型谓词时，可以使用安全的类型断言，无需用到any类型：
因为你已经通过*ngIf的判断保证了进入else分支时config一定不是数组，所以该断言运行时100%安全：

1. 组件类新增断言用getter：

get singleConfig(): IDialogConfig {
  return this.config as IDialogConfig;
}

2. 模板else分支替换为使用singleConfig访问属性：

<ng-template #singleMessage>
  <p [fieldKey]="singleConfig.fieldKey" class="display-4 confirm-msg"></p>
</ng-template>

现有代码中数组循环内用的是[fieldId]属性绑定，singleMessage分支用的是[fieldKey]属性绑定，请确认属性名和你自定义组件接收的输入属性名一致，避免运行时绑定错误。

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