1
votes

Quelqu'un pourrait-il expliquer pourquoi imprimer une valeur d'option montrant "2: Object"?

Salut Actuellement, j'ai développé une interface utilisateur en utilisant angular 5 et dactylographié. Dans l'un de mes composants, j'ai un formulaire réactif et dans la vue du composant, j'ai un contrôle de formulaire de sélection. Donc, ce que je veux, c'est que chaque fois que je choisis une option différente dans la boîte de sélection, elle doit imprimer la valeur choisie. j'ai donc enregistré une fonction contactListChanged dans ma classe de composant.

  contactListChanged($event){
    let a  = $event.target.value ;
    console.log(a);// prints 1: Object

    console.log(this.contactListControl.value); // prints Object {id: "1", name: "irish msisdn 1", total: 1000, displayName: "irish msisdn 2(1000)"}
  }

dans le fichier ts du composant

<select formControlName="contactList" [compareWith]="compareResource" (change)="contactListChanged($event)">
<option value="" disabled>{{ 'PLACEHOLDERS.CONTACT_LIST' | translate }}</option>
<option *ngFor="let contactList of contactLists" [ngValue]="contactList">{{ contactList.name }}</option>
</select>

console.log (a) print la valeur "2: Object". Cependant console.log (this.contactListControl.value); imprime correctement la valeur. Object {id: "2", name: "irish msisdn 2", total: 1200, displayName: "irish msisdn 2 (1200)"}

pourquoi ce comportement? je m'attendrais à ce que console.log (a) imprime la valeur Object {id: "2", name: "irish msisdn 2", total: 1200, displayName: "irish msisdn 2 (1200)"}

donc ce que je veux, c'est utiliser [ngValue] et obtenir l'objet sélectionné dans la méthode contactListChanged. Comment puis-je y parvenir?

apprécie vraiment votre aide

merci

typescript angular

2 commentaires

Pouvez-vous ajouter un écran de console.log?

1: Object Object {id: "1", name: "irish msisdn 1", total: 1000, displayName: "irish msisdn 2 (1000)"}

3 Réponses :

0
votes

Parce que vous avez lié contactList dans [ngValue] = "contactList", c'est pourquoi objectez la sélection dans contactListChanged ($ event) pour sélectionner le nom liez contactList.name à ngValue comme suit

<option *ngFor="let contactList of contactLists" [ngValue]="contactList.name">{{ contactList.name }}</option>

vous pouvez également utiliser value si vous ne passez que string. La seule différence entre deux est que la valeur est toujours string, où dans ngValue vous pouvez passer object.

0 commentaires

0
votes

Il est important de comprendre que lorsque vous obtenez une valeur à partir d'une entrée (radio, case à cocher, options ...), sa valeur sera toujours convertie en type string .

Et parce que contactList est un objet, la console vous montre exactement ce que c'est: un objet converti en chaîne.

Donc, si vous voulez que la valeur identifie l'objet que vous voulez, utilisez plutôt l'id [value] = "contactList.id" (ou la propriété qui spécifie chaque objet):

contactListChanged($event) {
    let objId  = $event.target.value ;
    console.log(this.contactLists.find(x => x.id == objId));
}

Ensuite, utilisez l'identifiant pour obtenir l'objet que vous voulez:

<option *ngFor="let contactList of contactLists" [value]="contactList.id">{{ contactList.name }}</option>

0 commentaires

0
votes

Javascript par défaut ne prend pas en charge les objets / tableaux dans l'attribut value de l'élément select . Angular a résolu ce problème en utilisant ngValue . Lorsque nous utilisons ngValue pour des objets dans Angular, il définit la valeur Javascript de l'élément select sur id: Object où id code> est l'index de l'option sélectionnée. et Object est une valeur de chaîne simple. Donc, si vous accédez à la valeur de l'option sélectionnée en utilisant du Javascript brut ( $ event.target.value ), vous recevrez 1: Object , 2: Object , etc. selon l'option sélectionnée. Vous pouvez accéder à l'objet en mappant l'index aux options, mais Angular le fait déjà pour vous.

Au lieu de cela, vous devez accéder à la valeur sélectionnée en utilisant les méthodes de liaison natives d'Angular ( formControl ou ngModel ) car Angular extrait l'index ( id ) dans la valeur Javascript ( id: Object ) et le mappe à l'index des options dans le sélectionnez la liste déroulante pour obtenir la valeur de l'objet.

  La manière correcte d'accéder à la valeur serait donc d'utiliser  formControl  ou  ngModel  pour accéder à la valeur sélectionnée. Puisque vous utilisez des formulaires réactifs, dans votre cas, vous avez déjà montré comment accéder à la valeur. 
 contactListChanged() {
  const selectedValue = this.contactListControl.value;
  console.log(selectedValue);
}

get contactListControl() {
  return this.form.get('contactList');
}
  (Source:  Base de code angulaire )

0 commentaires