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组件中使用了@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，编译器将知道您希望引用单个或多值项并相应地假设。在if of valueType之后，value不会是string | string[]，而是string或string[]。