为什么 Angular 中的 NgForOf 指令不能与联合类型一起使用？

Question

在我的组件中，我定义了一个属性数组，如下所示：

array: number[] | string[] = ['1', '2'];

在模板中，我使用 ngFor 迭代该数组的元素：

<div *ngFor="let element of array">
  {{element}}
</div>

但编译器抛出这个错误：

error TS2322:
Type 'number[] | string[]' is not assignable to
type '(number[] & NgIterable<number>) | null | undefined'.

array我不明白 Angular 如何以及为何推断出这种情况下的属性类型number[] & NgIterable<number>。

$any()我知道我可以通过在模板内部使用或将angularCompilerOptions.strictTemplates内部设置tsconfig.json为 来消除错误false，但如果没有必要，我想避免这样做。

我也不喜欢将属性类型更改array为的想法(number | string)[]，因为这是错误的，我array只想包含数字或字符串。

Answer 1

您可以创建一个 getter 来“转换”您的数组

  get castArray()
  {
    return this.array as NgIterable<number|string>
  }

castArray并在 *ngFor 中使用

<div *ngFor="let element of castArray">
   {{element}}
</div>

但我真的觉得这是一种“丑陋”的做法。