2017-10-20 6 views
0

選択入力のオプションはこのように、テンプレートに定義されている場合:選択入力は、オプションでngValueは、角2成分が異なる

<select formControlName="gender"> 
    <option *ngFor="let g of genders" [ngValue]="g.code">{{g.name}}</option> 
</select> 

制御がレンダリングされる:

<select class="ng-pristine ng-valid ng-touched" formcontrolname="gender" ng-reflect-name="gender"> 
    <option ng-reflect-ng-value="0: 71011">Dona</option> 
    <option ng-reflect-ng-value="1: 71012">Home</option> 
    <option ng-reflect-ng-value="2: 71013">Desconegut</option> 
</select> 

選択したオプションの場合、の値がFormGroupから数値としてリカバリされます。

今私は同じ構造(コード/名)で任意のパラメータのリストをロードするコンポーネントを開発しようとしているし、そのために、私は、コンポーネント定義されていますが、内のコードで

@Component({ 
    selector: 'select[selectLoader]', 
    template: ` 
     <option *ngFor="let parameter of parametersArray" [ngValue]="parameter.code">{{parameter.name}}</option>    ` 
}) 

をパラメータリストは、属性familyの値(パラメータのファミリのコードを提供する)から適切にロードされます。この場合

<select class="c3 ng-pristine ng-valid ng-touched" family="GENDER" formcontrolname="gender" selectloader="" ng-reflect-name="gender" ng-reflect-family="GENDER"> 
    <option ng-reflect-ng-value="71011">Dona</option> 
    <option ng-reflect-ng-value="71012">Home</option> 
    <option ng-reflect-ng-value="71013">Desconegut</option> 
</select> 

を、FormGroupによって返さ値が文字列代わりの数であるがそうである:違いは、1つのコンポーネントがレンダリングされる回数の両方のケースでコードされ、ということですオプションのテンプレート部分は同じであり、異なる方法でレンダリングされ、戻り値はngValueタイプに対応しません。

ngValueは、[ngValue]="parameter.code"と定義され、codeですが、2番目の数字は文字列として扱われます。

どうして違うのですが、どうすればいいですか?

更新:example in stakblitzです。私はngValueを完全に無視し、コンテンツテキストを値として取ることも発見しました。

+2

私はこの問題は、あなたのコードの他の部分であると思います。 stackblitz.comの再生例を作成できれば、簡単に調査することができます。 –

+0

残りのコードはパラメータリストのロードだけを持ち、両方の場合に 'code'は数字です。 – francadaval

+1

"話が安く、コードを見せてください。" Linus Torvalds(2000) –

答えて

1

NgSelectOption からSelectControlValueAccessorを注入したいのですが、あなたのケースではホストがそれを提供しません。

https://github.com/dart-lang/angular/blob/e22f0e9ef32dd162c2ce0c9d17271341ef4c40d9/angular_forms/lib/src/directives/select_control_value_accessor.dart#L101-L103

これはNgSelectOptionディレクティブの残りの部分はあなたがdescried行動につながる異なっ

https://github.com/dart-lang/angular/blob/e22f0e9ef32dd162c2ce0c9d17271341ef4c40d9/angular_forms/lib/src/directives/select_control_value_accessor.dart#L103-L133

を動作するようになります。

私は回避策が見つかりませんでした。
(マイ試みhttps://stackblitz.com/edit/angular-p89pvz?file=app/select_loader.component.ts

関連する問題