Material angular: mat-seleccionar no seleccionar predeterminado

Tengo un mat-select donde las opciones son todos los objetos definidos en una matriz. Estoy tratando de establecer el valor predeterminado en una de las opciones, sin embargo, se deja seleccionada cuando la página se renderiza.

Mi archivo typescript contiene: 

  public options2 = [
    {"id": 1, "name": "a"},
    {"id": 2, "name": "b"}
  ]
  public selected2 = this.options2[1].id;

Mi archivo HTML contiene: 

  <div>
    <mat-select
        [(value)]="selected2">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

He intentado configurar selected2 y el value en mat-option tanto al objeto como a su id, y he intentado usar ambos [(value)] y [(ngModel)] en el mat-select, pero ninguno funciona.

Estoy usando material versión 2.0.0-beta.10

Gracias

Author: William Moore, 2017-11-16
Source

5 answers

Utilice un enlace para el valor de su plantilla.

value="{{ option.id }}"

Debe ser 

[value]="option.id"

Y en su valor seleccionado use ngModel en lugar de value.

<mat-select [(value)]="selected2">

Debe ser 

<mat-select [(ngModel)]="selected2">

Código completo: 

<div>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</div>

En una nota al margen a partir de versión 2.0.0-beta.12 el material select ahora acepta un elemento mat-form-field como elemento padre por lo que es consistente con los otros controles de entrada de material. Reemplazar el elemento div por el elemento mat-form-field después de actualizar.

<mat-form-field>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</mat-form-field>
 33
Author: Igor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-16 15:28:32

Use compareWith, una función para comparar los valores de las opciones con los valores seleccionados. ver aquí: https://material.angular.io/components/select/api#MatSelect

Para un objeto de la siguiente estructura:

listOfObjs = [{ name: 'john', id: '1'}, { name: 'jimmy', id: '2'},...]

Defina el marcado de esta manera: 

<mat-form-field>
  <mat-select
    [compareWith]="compareObjects"
    [(ngModel)]="obj">
       <mat-option  *ngFor="let obj of listOfObjs" [value]="obj">
          {{ obj.name }}
       </mat-option>
    </mat-select>
</mat-form-field>

Y definir la función de comparación de esta manera: 

compareObjects(o1: any, o2: any): boolean {
  return o1.name === o2.name && o1.id === o2.id;
}
 11
Author: Badis Merabet,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-04 12:22:45

Usted debe ser vinculante como [value] en el mat-option como a continuación, 

<mat-select placeholder="Panel color" [(value)]="selected2">
  <mat-option *ngFor="let option of options2" [value]="option.id">
    {{ option.name }}
  </mat-option>
</mat-select>

DEMOSTRACIÓN EN VIVO

 8
Author: Aravind,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-16 15:27:54

Estoy usando Angular 5 y formas reactivas con mat-select y no pude obtener ninguna de las soluciones anteriores para mostrar el valor inicial.

Tuve que agregar [compareWith] para tratar con los diferentes tipos que se utilizan dentro del componente mat-select. Internamente, parece que mat-select usa una matriz para contener el valor seleccionado. Es probable que esto permita que el mismo código funcione con varias selecciones si ese modo está activado.

Angular Select Control Doc

Aquí está mi solución:

Form Builder para inicializar el control de formulario: 

this.formGroup = this.fb.group({
    country: new FormControl([ this.myRecord.country.id ] ),
    ...
});

Luego implementa la función compareWith en tu componente: 

compareIds(id1: any, id2: any): boolean {
    const a1 = determineId(id1);
    const a2 = determineId(id2);
    return a1 === a2;
}

A continuación, cree y exporte la función determineId (tuve que crear una función independiente para que mat-select pudiera usarla): 

export function determineId(id: any): string {
    if (id.constructor.name === 'array' && id.length > 0) {
       return '' + id[0];
    }
    return '' + id;
}

Finalmente agregue el atributo compareWith a su mat-select: 

<mat-form-field hintLabel="select one">
<mat-select placeholder="Country" formControlName="country" 
    [compareWith]="compareIds">

    <mat-option>None</mat-option>
    <mat-option *ngFor="let country of countries" [value]="country.id">
                        {{ country.name }}
    </mat-option>
</mat-select>
</mat-form-field>
 8
Author: Heather92065,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-10-06 04:34:32

¡Prueba esto!

this.selectedObjectList = [{id:1}, {id:2}, {id:3}]
this.allObjectList = [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}]
let newList = this.allObjectList.filter(e => this.selectedObjectList.find(a => e.id == a.id))
this.selectedObjectList = newList
 0
Author: Facu Quintana,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-10-03 19:12:11