mat-select: select current value when input key is Number

Issue

I've a variable tipo of type Number. When I do this:

<mat-select placeholder="Tipo" formControlName="tipo">
  <mat-option [value]="item.key" *ngFor="let item of arrayOfValues | keyvalue">
    {{ item.value }}
  </mat-option>
</mat-select>

it doesn't select the current tipo for the dropdown (because its Number, not string). .key seems to works/match only for string (if in fact I change typo to string, it works).

What's the correct way to match keys as integer in this case?

Tried this:

this.form = this.fb.group({
  tipo: [data.tipo.toString(), [Validators.required]]
});

which seems to works, but I don't like so much it as workaround (it basically treats Number as string, only for match the purpose).

Solution

The issue here is not with the tipo formControl type. The cause is the type of the item.key which is probably a string. Perhaps if the item.key and the tipo are both numbers, the desired behavior will work fine.

The KeyValue will provide a key of string type, so add + to convert it to number : <mat-option [value]="+item.key" ...>

KeyValue Pipe documentation
Working stackblitz example

Answered By - Rabii Kahlaoui