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

Question

I have a data type:

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

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

And, I using TYPE_A in the component for @Input:

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

And this is my HTML code:

<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>

I getting this error in vscode:

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

I understand the logic of this error, But I'm looking for the best solution to this problem.

Answer 1

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

This erases the type of your variable. It can be used in HTML when you can't properly infer the type of your variable.