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

Question

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

Answer 1

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