Search code examples
angulartypescriptngfor

Why Type zzz is not assignable to type (zzz & NgIterable<xxx>) | undefined | null


In Angular 9 why do I get this message: Type Items is not assignable to type (Items & NgIterable) | undefined | null

The model is correct. I get no error on the data. The code works but still I get this typescript warning.

the model of myData looks like this:

interface Item {
  url: string;
  label: string;
}

export interface Items {
  [key:number]: Item ;
}

My HTML:

<ng-container *ngFor="let card of myData"><!-- here I get the warning -->
some content
</ng-container>

ADDED: I forgot to add the example data to make this clearer. It is an array like this:

[
    {
      url: 'todo',
      label: 'Rekeningnummer'
    },
    {
      url: 'todo',
      label: 'Postadres'
    }] 

Solution

  • I fixed it by using type Item[] instead of Items.

    myData: Item[] = [...]
    

    I read that Indexes of the form [key: string]: T can be considered as being always optional. So it seems that I cannot use ? to make the array possibly empty.

    export interface Items {
      [key:number]?: Item ;
    }