event - change title angular 4

Establecer el elemento seleccionado inicialmente en la lista Seleccionar en Angular2

Question

Me las arreglé para obtener una Lista de selección para enlazar con mi modelo con el fin de guardar, pero no puedo averiguar cómo hacer que Angular2 seleccione automáticamente la opción correcta en la Lista de selección si estoy proporcionando la funcionalidad de edición. En otras palabras, si estoy editando un objeto preexistente a través de un formulario, necesito que la Lista de selección refleje el estado inicial del objeto (por ejemplo, la opción 5 en la lista de selección), en lugar de que se establezca por defecto el primer elemento. .

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object">{{object.name}}</option>
</select>

¡Cómo me imagino que debería funcionar, pero no lo hace!

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="object === originalObject">{{object.name}}</option>
</select>

Básicamente, estoy tratando de hacer uso de la propiedad ''seleccionada'' en la opción, pero por alguna razón no hace nada. El ''selectedObject'' en este caso sería un objeto en el componente que puede leer.

Answer 1

¿Funcionará si simplemente elimina el elemento editado de la matriz y lo empuja al principio de la matriz, para que se seleccione automáticamente?

Answer 2

Actualice a angular 4.XX, hay una nueva forma de marcar una opción seleccionada:

<select [compareWith]="byId" [(ngModel)]="selectedItem">
  <option *ngFor="let item of items" [ngValue]="item">{{item.name}}
  </option>
</select>

byId(item1: ItemModel, item2: ItemModel) {
  return item1.id === item2.id;
}

Answer 3

Bien, entonces descubrí cuál era el problema y el enfoque que creo que funciona mejor. En mi caso, debido a que los dos objetos no eran idénticos desde una perspectiva de Javascript, como en: pueden haber compartido los mismos valores, pero eran objetos reales diferentes, por ejemplo, originalObject se creó una instancia completamente separada de los objects que era esencialmente una matriz de referencia Datos (para rellenar el desplegable).

Descubrí que el enfoque que mejor funcionaba para mí era comparar una propiedad única de los objetos, en lugar de comparar directamente los dos objetos completos. Esta comparación se realiza en la propiedad enlazada selected :

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="object.uniqueId === originalObject.uniqueId">{{object.name}}</option>
</select>

Answer 4

Espero que ayude a alguien! (Funciona en Angular 6)

Tuve que agregar muchas opciones / opciones dinámicamente y las siguientes me funcionaron:

<div *ngFor="let option of model.q_options; let ind=index;">

        <select 
          [(ngModel)]="model.q_options[ind].type" 
          [ngModelOptions]="{standalone: true}"
        > 
          <option 
            *ngFor="let object of objects" 
            [ngValue]="object.type" 
            [selected]="object.type === model.q_options[ind].type"
          >{{object.name}}
          </option>
        </select> 

        <div [ngSwitch]="model.q_options[ind].type">
          ( here <div *ngSwitchCase="''text'' or ''imagelocal'' or etc."> is used to add specific input forms )
        </div>
</div>

y en * .ts

// initial state of the model
// q_options in html = NewOption and its second argument is option type
model = new NewQuestion(1, null, 2, 
  [
    new NewOption(0, ''text'', '''', 1), 
    new NewOption(1, ''imagelocal'', '''', 1)
  ]);

// dropdown options
objects = [
    {type: ''text'', name: ''text''},
    {type: ''imagelocal'', name: ''image - local file''},
    {type: ''imageurl'', name: ''image URL''}
   ( and etc.)
];

Cuando el usuario agrega una ''opción de entrada'' más (los pls no confunden ''opción de entrada'' con selección / opciones - selección / opciones son estáticas aquí), la selección / opción específica, seleccionada previamente por el usuario, se conserva en cada / todo agregado dinámicamente '' Seleccione las opciones de entrada / opciones.

Answer 5

Puedes lograr lo mismo usando

<select [ngModel]="object">
  <option *ngFor="let object of objects;let i= index;" [value]="object.value" selected="i==0">{{object.name}}</option>
</select>

Answer 6

Si utiliza

<select [ngModel]="object">
    <option *ngFor="let object of objects" [ngValue]="object">{{object.name}}</option>
</select>

Debe establecer el object propiedad en su clase de componentes en el elemento de los objects que desea que haya preseleccionado.

class MyComponent {
  object;
  objects = [{name: ''a''}, {name: ''b''}, {name: ''c''}];
  constructor() {
    this.object = this.objects[1];
  }
}