2
votes

Modification de la liste déroulante - données montrant [objet objet]

J'essaye de lier des données JSON à une liste déroulante.OnChnge function Je passe la valeur au composant correspondant, quand je le débogue en affichant [object object] .

Ma valeur JSON

selected(ev: Event, data: any []) {
        // console.log('data', data);
        for (const ea of data) {
            console.log(ea);

        }

code html

<select #selectedData (change)="selected($event,selectedData.value)">
            <option>Select....</option>
            <option *ngFor="let dataList of dataLists"  [value]="dataList">{{dataList.host_name}}</option>
        </select>

code composant

dataLists = [
    { 'id': 1, 'host_name': 'Service 1', 'port': '8090', 'username': 'user1', 'password': 'abc' },
    { 'id': 2, 'host_name': 'Service 1', 'port': '8090', 'username': 'user2', 'password': 'abc' },
    { 'id': 3, 'host_name': 'Service 1', 'port': '8090', 'username': 'user3', 'password': 'abc' }
];

Comment puis-je obtenir des données au format json dans le composant. comme {'id': 1, 'host_name': 'Service 1', 'port': '8090', 'username': 'user1', 'password': 'abc'} p>

angular angular6

1 commentaires

J'espère que celui-ci aidera stackblitz.com/edit/angular-vecfk6

4 Réponses :

2
votes

Par défaut, la propriété value accepte la valeur de chaîne (la conversion d'un objet en chaîne donnerait un résultat [objet objet] ). Pour utiliser l'objet comme valeur, utilisez la propriété ngValue qui accepte tout type comme valeur.

selected(ev: Event, data: any) {
  console.log(data);
}

Le code final serait comme:

Modèle:

<select #selectedData (change)="selected($event,selectedData.value)">
  <option>Select....</option>
  <option *ngFor="let dataList of dataLists" [ngValue]="dataList">{{dataList.host_name}}</option>
</select>

TS:

<option *ngFor="let dataList of dataLists"  [ngValue]="dataList">{{dataList.host_name}}</option>

1 commentaires

Je peux en mesure d'afficher la valeur dans le menu déroulant. Lors du changement de cette liste déroulante, je passe dataList au composant. Chaque liste de données ayant json.In côté composant son affichage comme [objet objet]

1
votes

Veuillez modifier votre code comme ci-dessous.

HTML:

 drp_selectedValue :any;


 selected() {
   console.log( this.drp_selectedValue);
 }

ts:

<select  (change)="selected()" [(ngModel)]="drp_selectedValue">
        <option>Select....</option>
        <option *ngFor="let dataList of dataLists" (click)="selectedEA(dataList)" 
          [ngValue]="dataList">{{dataList.host_name}}
        </option>
</select>

0 commentaires

0
votes

J'ai une autre solution qui fonctionne bien

html

selected(ev: Event, data: any) {
         for (let i = 0; i < this.dataLists.length; i++) {
            if (this.dataLists[i].id === parseInt(data, 10)) {
                console.log(this.dataLists[i]);
                break;
            }
        }
        }

 <select #selecteData (change)="selected($event,selecteData.value)">
                <option>Select........</option>
                <option *ngFor="let dataList of dataLists" [value]="dataList.id">{{dataList.host_name}}</option>
            </select>

0 commentaires

0
votes

changez [value] en [ngValue] cela fonctionnera.

<select [(ngModel)]="selectedDataList" (change)="selected()">
   <option>Select....</option>
   <option *ngFor="let data of dataLists" [ngValue]="data">{{data.host_name}}    </option>
</select>

export class SelectOverviewExample {
     selectedDataList: any = {};
     dataLists: any[] = [
           { 'id': 1, 'host_name': 'Service 1', 'port': '8090', 'username': 'user1', 'password': 'abc' },
           { 'id': 2, 'host_name': 'Service 2', 'port': '8090', 'username': 'user2', 'password': 'abc' },
           { 'id': 3, 'host_name': 'Service 3', 'port': '8090', 'username': 'user3', 'password': 'abc' }
     ];

selected() {
  console.log(this.selectedDataList);
}

}

0 commentaires