Angular keyvalue pipe: argument type is not assignable to parameter type

Question

I want to iterate a map and display the keys and values in my html file, for doing that I used Angular's *ngfor with keyvalue pipe.

However, there's an error with the ngFor iteration:

Argument type Map<string, BarcodeInfoModel> is not assignable to parameter type {[p: string]: (() => IterableIterator) | ((key: string, value: BarcodeInfoModel) => this) | ((key: string) => boolean) | string | ((key: string) => (BarcodeInfoModel | undefined)) | (() => IterableIterator<[string, BarcodeInfoModel]>) | number | (() => IterableIterator) | (() => void) | ((callbackfn: (value: BarcodeInfoModel, key: string, map: Map<string, BarcodeInfoModel>) => void, thisArg?: any) => void)} | Map<string, (() => IterableIterator) | ((key: string, value: BarcodeInfoModel) => this) | ((key: string) => boolean) | string | ((key: string) => (BarcodeInfoModel | undefined)) | (() => IterableIterator<[string, BarcodeInfoModel]>) | number | (() => IterableIterator) | (() => void) | ((callbackfn: (value: BarcodeInfoModel, key: string, map: Map<string, BarcodeInfoModel>) => void, thisArg?: any) => void)>

Here the Map is declared and initialized with private files: Map<string, BarcodeInfoModel> = new Map<string, BarcodeInfoModel>(); where BarcodeInfoModel is a customized type, with variables like this:

export class BarcodeInfoModel {
    _codeType: string;
    _receivingID: string;
    _cache: Array<string>;
    _dcr: string;
    _packageType: string;
    _condition: string;
    
    constructor() {}
    
    ...

}

And in my html I use the iteration like:

<mat-accordion>
    <mat-expansion-panel *ngFor="let file of files | keyvalue">
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{file.key}}
        </mat-panel-title>
      </mat-expansion-panel-header>
      <p>{{file.value}}</p>
    </mat-expansion-panel>
  </mat-accordion>

And that's where the error occurs. If I run this snippet in my browser, files.value produces [object Object], not indicating it is of BarcodeInfoModel type. Also, in the html, I cannot get attributes of BarcodeInfoModel by doing something like {{file.value._codeType}}.

Etna

how are you populating Map with values ? – Neptune

@ihorbond I used the setter of Map: this.files.set(fileName, barcodeInfo); – Etna

update private to public for files variable to access in html properly – Snuggery

@Snuggery Thanks, however it doesn't work. – Etna

can you share a similar type of demo link of stackblitz , probably can look directly there and can try to sort – Snuggery

@Snuggery Thank you. I gave up using map, using 2D array wiped away this problem. – Etna

Answer 1

The type of your objects declared in your map does not correspond to the type of the objects you have passed to your map.

For example :

map = new Map<number, string>([[2, 'Burger'], [1, 'Tomato']]);

You won't have error

and if you write it like :

map = new Map([[2, 'Burger'], [1, 'Tomato']]);

you will have the error that number, string is not assignable

TYPEscript.

Goodluck

Dalt