The `NgForOf` directive is used to iterate over lists of strings or string arrays within a given `NgIterable` of strings or string

Question

The `NgForOf` directive is used to iterate over lists of strings or string arrays within a given `NgIterable` of strings or string

Here is a data type example:

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

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

In my component, I am using TYPE_A for @Input:

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

This is how it's implemented in the HTML:

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

An error message appears in vscode:

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

Although I understand why this error occurs, I am seeking the optimal resolution.

angular typescript ngfor angular-ng-if

Answer 1

Answer №1

To create a discriminated union for your type, follow these steps:

export interface TypeA_SingleValue {
  valueType: TypeA_ValueTypes.SingleValue;
  value: string;
}
export interface TypeA_MultiValue {
  valueType: TypeA_ValueTypes.MultiValue;
  value: string[];
}

export enum TypeA_ValueTypes {
  SingleValue = "SingleValue",
  MultiValue = "MultiValue",
}

When you need to access the value, ensure to first verify the valueType against the two possible values. The compiler will then understand whether you are referring to the single or multivalued item and interpret it accordingly. Following an if statement checking the valueType, the type of value will not be string | string[], but either string or string[] based on the condition.

Answer 2

To create a discriminated union for your type, follow these steps:

export interface TypeA_SingleValue {
  valueType: TypeA_ValueTypes.SingleValue;
  value: string;
}
export interface TypeA_MultiValue {
  valueType: TypeA_ValueTypes.MultiValue;
  value: string[];
}

export enum TypeA_ValueTypes {
  SingleValue = "SingleValue",
  MultiValue = "MultiValue",
}

When you need to access the value, ensure to first verify the valueType against the two possible values. The compiler will then understand whether you are referring to the single or multivalued item and interpret it accordingly. Following an if statement checking the valueType, the type of value will not be string | string[], but either string or string[] based on the condition.

The `NgForOf` directive is used to iterate over lists of strings or string arrays within a given `NgIterable` of strings or string

Answer №1

Similar questions

Encounter a Typescript error when dealing with "app.ws" while using express-ws

Sending information between two Angular 7 applications

Creating a versatile JavaScript/TypeScript library

Different methods to initiate multiple calls using the dispatch function within ngrx

The Angular2 app and NodeJs in the Docker container are unresponsive

Upon installation of a new component, Angular components are automatically removed from the system

Save information for each session with a set expiration time

The map() function's splice operation unexpectedly removes only half of the array

Preserve Angular 2 service instances while navigating between routes

Implementing Observable lambdas in Angular templates for easy function calling

I find that the value is consistently undefined whenever I attempt to set it within a promise in Angular

Invalid component prop provided to ButtonBase in Material UI. Ensure that the children prop is correctly rendered in this custom component

Navigating through an interface array using *ngFor in TypeScript

Looking to categorize and sum the values within an array of objects using JavaScript?

Is it possible to maintain the scroll position of a PrimeNG table when updating the data?

Monitoring Unread Message Totals in Twilio Chat

Transforming FormData string key names into a Json Object that is easily accessible

Formik Fields with unique key properties

The execution time of Node's Promises.all() function is unreasonably slow

The element does not recognize the property 'width' since it is not defined in the type of 'GlobalEventHandlers'