mat-select: select 输入键为数字时的当前值

Question

我有一个 Number 类型的变量 tipo。当我这样做时：

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

它不是 select 下拉列表的当前 tipo（因为它是数字，而不是字符串）。 .key 似乎 works/match 仅适用于字符串（如果实际上我将 typo 更改为字符串，它会起作用）。

在这种情况下，将键匹配为整数的正确方法是什么？

试过这个：

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

这似乎可行，但我不太喜欢它作为解决方法（它基本上将数字视为字符串，仅用于匹配目的）。

Answer 1

这里的问题不在于 tipo formControl 类型。原因是 item.key 的类型，它可能是一个字符串。也许如果 item.key 和 tipo 都是数字，所需的行为就可以正常工作。

KeyValue 会提供一个字符串类型的键，所以添加 + 将其转换为数字： <mat-option [value]="+item.key" ...>

KeyValue Pipe documentation
Working stackblitz example

mat-select: select 输入键为数字时的当前值

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

arrays

numbers

angular