NgForOf<string | string[], NgIterable<string | string[]>>

Question

我有一个数据类型：

export interface TYPE_A {
  valueType: TYPE_A_VALUE_TYPES;
  value: string | string[];
}

export enum TYPE_A_VALUE_TYPES {
  singleValue = "singleValue",
  multiValue = "multiValue",
}

而且，我在 @Input 的组件中使用 TYPE_A:

@Input() datas: TYPE_A[] = [];

这是我的 HTML 代码：

<div class="feildContainer" *ngFor="let data of datas">
    <div class="singleFeild" *ngIf="data.valueType == 'singleValue'">
         ...
    </div>
    <div class="multiFeild" *ngIf="data.valueType == 'multiValue'">
        <other-component *ngFor="let dataValue of data.value"></other-component>
    <div>
</div>

我在 vscode 中收到此错误：

NgForOf<string | string[], NgIterable<string | string[]>>.ngForOf: NgIterable<string | string[]> | null | undefined

我理解这个错误的逻辑，但我正在寻找解决这个问题的最佳方法。

Answer 1

  <other-component *ngFor="let dataValue of $any(data.value)"></other-component>

这会删除变量的类型。当您无法正确推断变量类型时，可以在 HTML 中使用它。

Answer 2

使用有区别的联合作为你的类型：

export interface TYPE_A_SINGLEVALUE {
  valueType: TYPE_A_VALUE_TYPES.singleValue;
  value: string;
}
export interface TYPE_A_MULTIVALUE {
  valueType: TYPE_A_VALUE_TYPES.multiValue;
  value: string[];
}

export enum TYPE_A_VALUE_TYPES {
  singleValue = "singleValue",
  multiValue = "multiValue",
}

然后，当你想使用 value 项目时，你首先检查 valueType 与两个可能值之一，编译器会知道你想引用单值或多值项目并相应地假设。在 valueType 的 if 之后 value 将不会是 string | string[]，而是 string 或 string[] 已检查。