双方向バインディングで整数を文字列に変換する

Question

私が取り組んでいるプロジェクトでは、すべてのドロップダウンフィールドでアプリケーション全体を使用するドロップダウンフィールドコンポーネントがあります。

コンポーネントは、この形式のドロップダウンのためのオプションを取得します@input options[{value: '', label: ''},.. ]

を持っているこれは私のドロップダウンのほとんどで動作しますが、1のために、値が整数として提供されます。 '2'！== 2として、ドロップダウンは値を表示しません。

<mat-select class="form-control" [(value)]="value"> 
    <mat-option *ngFor="let option of options" [value]="option.value">{{option.label}}</mat-option> 
</mat-select> 

githubについても同様の問題が報告されています。

このコメントとして、私は入力と出力を別々にすることでこれを回避することができます。

<mat-select class="form-control" [value]="value.toString()" (change)="value = $event.value"> 
    <mat-option *ngFor="let option of options" [value]="option.value">{{option.label}}</mat-option> 
</mat-select> 

しかし、誰もがこの問題の素晴らしい解決策を持っているのだろうか。

多くのおかげで、

注：（これは値としてUUIDなどを持っている他のドロップダウンに影響を与えるようPlsは、整数型に値を変更することをお勧めしません）

Answer 1

[value]="option.value" 

に変換

[value]="{{option.value}}"