Valeur non affichée pour le champ de saisie à l'aide de la liaison unidirectionnelle angulaire2

Question

Objectif: obtenir une collection de valeurs basée sur la sélection de la liste déroulante et les placer dans des champs de saisie masqués à inclure dans mon modèle;

Le html relative:

<select class="selectFoo" (change)="onSelect($event.target.value)" name="FooName" ngModel> 
 
      <option selected="selected">--Select--</option> 
 
      <option *ngFor="let foo of foos" [value]="foo.ID">{{foo.Name}} 
 
</option> 
 
</select> 
 
<input type="hidden" [value]="fooAddress" name="FooAddress" ngModel/>

Dans le code ci-dessus, j'ai appelé une fonction nommée OnSelect pour obtenir les données sur le foo sélectionné. Les fichiers sont remplis à l'aide d'un appel de service Web. Voici l'extrait de mon fichier ts.

import { Component, OnInit } from '@angular/core'; 
 

 
import { Foo } from './model'; 
 

 
import { DataService } from './data.service'; 
 

 

 
@Component({ 
 
    moduleId: module.id, 
 
    selector: 'add-on', 
 
    templateUrl: './app.component.html' 
 
}) 
 
export class AppComponent implements OnInit { 
 
    foos : Foo[]; 
 

 
    selectedFoo: Foo; 
 
    fooAddress: string; 
 

 
    onSelect(fooID){ 
 
     this.selectedFoo = null; 
 
     for(var i = 0; i < this.foos.length; i++) 
 
     { 
 
     console.log(this.foos[i].ID); 
 
     if(this.foos[i].ID == fooID){ 
 
      this.selectedFoo = this.foos[i]; 
 
      this.fooAddress = this.selectedFoo.Address.toString(); 
 
     } 
 
     } 
 
    } 
 
    }

Je l'origine essayé d'une manière contraignante ma valeur à la selectedFoo mais je recevais une erreur indiquant que ma valeur d'adresse n'a pas été définie. J'ai remarqué que je pourrais définir la valeur égale à selectedFoo et il n'a pas d'erreur. J'ai donc créé une nouvelle variable qui a été définie sur fooAddress en fonction du foo sélectionné. Je ne reçois aucune valeur même si en parcourant le code, je vois qu'il a une valeur.

Comment est-ce que je peux remplir ma valeur afin que je puisse l'utiliser dans mon modèle? Faites-moi savoir si je dois fournir autre chose.

Merci!

Answer 1

Si je comprends bien ce que vous recherchez, alors quelque chose comme ça fonctionnerait:

<select name="FooName" [(ngModel)]="selectedFoo"> 
    <option>--Select--</option> 
    <option *ngFor="let foo of foos" [ngValue]="foo" >{{foo.Name}}</option> 
</select> 
<input type="hidden" [value]="selectedFoo?.Address" name="FooAddress" /> 

//Assuming your 'foo' items are e.g. { ID: 1, Name: 'Hello', Address: '123 Hello St'} 

Ici vous pouvez lier la propriété Address du selectedFoo directement sur votre champ de saisie caché, plutôt que de devoir gérer la (change) événement.