ngforof＆lt; string |字符串[]，ngiterable＆lt; string | string []＆gt;＆gt;

Question

我有一个数据类型：

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

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

并且，我在组件中使用type_a @input：

@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

使用歧视的联合作为您的类型：

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 value之后，不会是string |字符串[]，但是字符串或string []，如所检查。