Vincular elemento seleccionado a objeto en Angular 2

Angular 2 es un marco popular que se utiliza para crear aplicaciones web. Una de las tareas más comunes en Angular 2 es vincular un elemento seleccionado a un objeto.

Este artículo aprenderá a usar las directivas ng-for y ng-value para vincular un elemento de selección con un objeto en Angular 2.

Use el ng-for y el ng-value para vincular un elemento seleccionado a un objeto en Angular 2

Ng-For es una directiva de plantilla integrada que permite recorrer de forma sencilla una colección de elementos, como un array o un objeto, y crear una plantilla para cada uno.

*ngFor="let <value> of <collection>"

La directiva ng-value vincula el elemento seleccionado a un objeto. Especifica el nombre de la propiedad en el objeto que debe asignarse al valor del elemento seleccionado.

 <input ng-value="expression"></input>

A veces, los principiantes se confunden entre el valor ng y el valor. Entonces, si está trabajando para vincular un elemento de selección con un objeto en Angular 2, debe conocer la diferencia entre ng-value y value.

la diferencia entre el ng-value y el value en Angular

La diferencia es que value es siempre una cadena, mientras que ngValue te permite pasar un objeto. Por ejemplo, tiene un caso de uso en el que necesita mostrar los nombres de los elementos en el menú desplegable.

Y al elegir un solo objeto del menú, debe seleccionar la identificación del objeto para buscar en la base de datos. Sería útil usar ngValue en tal escenario porque necesita un Objeto.

Además, el modelo de objeto que desea poblar debe estar definido en su objeto.

Haga clic aquí si desea obtener más información sobre ng-value.

Pasos para vincular un elemento seleccionado a un objeto en Angular 2

A continuación se detallan algunos pasos básicos a seguir.

1. Agregue el atributo ng-model al elemento seleccionado.
2. Agregue el atributo selected al objeto que desea vincular.
3. Vincule la propiedad del objeto al elemento select con una sintaxis de llaves, {{obj.property}}.

Pongamos un ejemplo que nos ayudará a entender todos los pasos en detalle.

En primer lugar, crearemos un componente llamado AppComponent. Luego crearemos un objeto de interfaz con el nombre de ejemplo que muestra id y name.

En este caso, tanto id como name almacenan cadenas. Después de los dos pasos anteriores, es hora de modificar las opciones agregando información.

El código completo /app.component.ts se proporciona a continuación.

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


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Demo';

  selectedObject : example;
  SimpleExample = [
    {id: 'Welcome to New York City', name: 'New York'},
    {id: 'Welcome to Japan', name: 'Japan'},
    {id: 'Welcome to Singapore', name: 'Singapore'},
    {id: 'Welcome to Delft', name: 'Delft'}
  ]
}

interface example{
  id:string;
  name:string;
}

En el archivo component.ts, hemos agregado una variable selectedObject, un objeto example, y lo vincularemos al elemento select usando ngModel.

Otra variable, SimpleExample, incluye una colección de objetos utilizados para mostrar las opciones de selección de ngValue.

El código completo /app.component.html se proporciona a continuación.

<h2>Angular 2 Select Example</h2>

<select [(ngModel)]="selectedObject">
<option *ngFor="let show of SimpleExample" [ngValue]="show">
{{show.name}}
</option>
</select>

{{selectedObject | json}}

El objeto example ahora se ha agregado al selectedObject. Y usamos tubería JSON para mostrarlo.

JSON Pipe puede transformar un objeto de entrada en el resultado deseado, que luego se puede asignar a una variable o pasar como argumento. Utiliza la función incorporada de JavaScript JSON.stringify() para transformar los datos en una cadena JSON.

Para obtener más información sobre Angular JSON Pipe, haga clic aquí.

Estamos obteniendo el siguiente resultado del ejemplo mencionado anteriormente.

Haga clic aquí para verificar el código de trabajo completo mencionado anteriormente.