Material angular: mat-select sin 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 seleccionado cuando se procesa la página.

Mi archivo mecanografiado 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 fijar selected2y valueen mat-optionque tanto el objeto como su ID, y han intentado usar tanto [(value)]y [(ngModel)]en elmat-select , pero ninguno está trabajando.

Estoy usando la versión de material 2.0.0-beta.10

Utilice un enlace para el valor en su plantilla.

value="{{ option.id }}"

debiera ser

[value]="option.id"

Y en su valor seleccionado use en ngModellugar de value.

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

debiera 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 la versión 2.0.0-beta.12, la selección de material ahora acepta un mat-form-fieldelemento como elemento principal, por lo que es coherente con los otros controles de entrada de material. Reemplace el divelemento con el mat-form-fieldelemento 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>

Utilice 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 como este:

<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 defina la función de comparación como esta:

compareObjects(o1: any, o2: any): boolean {
  return o1.name === o2.name && o1.id === o2.id;
}

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 lidiar 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 múltiples selecciones si ese modo está activado.

Documento de control de selección angular

Esta es mi solución:

Form Builder para inicializar el control de formulario:

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

Luego implemente la función compareWith en su 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>

Usted debe ser vinculante como [value]en el mat-optionde la siguiente manera,

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

DEMO EN VIVO

Simplemente puede implementar su propia función de comparación

[compareWith]="compareItems"

Vea también el docu . Entonces el código completo se vería así:

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

y en el archivo Typecript:

  compareItems(i1, i2) {
    return i1 && i2 && i1.id===i2.id;
  }

Como ya se mencionó en Angular 6, el uso de ngModel en formas reactivas está en desuso (y se eliminó en Angular 7), por lo que modifiqué la plantilla y el componente de la siguiente manera.

La plantilla:

<mat-form-field>
    <mat-select [formControl]="filter" multiple 
                [compareWith]="compareFn">
        <mat-option *ngFor="let v of values" [value]="v">{{v.label}}</mat-option>
    </mat-select>
</mat-form-field>

Las partes principales del componente ( onChangesy otros detalles se omiten):

interface SelectItem {
    label: string;
    value: any;
}

export class FilterComponent implements OnInit {
    filter = new FormControl();

    @Input
    selected: SelectItem[] = [];

    @Input()
    values: SelectItem[] = [];

    constructor() { }

    ngOnInit() {
        this.filter.setValue(this.selected);
    }

    compareFn(v1: SelectItem, v2: SelectItem): boolean {
        return compareFn(v1, v2);
    }
}

function compareFn(v1: SelectItem, v2: SelectItem): boolean {
    return v1 && v2 ? v1.value === v2.value : v1 === v2;
}

Tenga en cuenta this.filter.setValue (this.selected) enngOnInit arriba.

Parece funcionar en Angular 6.

Lo hice como en estos ejemplos. Intenté establecer el valor de mat-select en el valor de una de las mat-options. Pero falló.

Mi error fue hacer [(value)] = "someNumberVariable" a una variable de tipo numérico mientras que las de mat-options eran cadenas. Incluso si tuvieran el mismo aspecto en la plantilla, no seleccionaría esa opción.

Una vez que analicé someNumberVariable en una cadena, todo estuvo totalmente bien.

Por lo tanto, parece que necesita que los valores de mat-select y mat-option no solo sean el mismo número (si está presentando números) sino que también deben ser de tipo cadena.

La solución para mí fue:

<mat-form-field>
  <mat-select #monedaSelect  formControlName="monedaDebito" [attr.disabled]="isLoading" [placeholder]="monedaLabel | async ">
  <mat-option *ngFor="let moneda of monedasList" [value]="moneda.id">{{moneda.detalle}}</mat-option>
</mat-select>

TS:

@ViewChild('monedaSelect') public monedaSelect: MatSelect;
this.genericService.getOpciones().subscribe(res => {

  this.monedasList = res;
  this.monedaSelect._onChange(res[0].id);


});

Usando objeto: {id: número, detalle: cadena}

¡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

Mi solución es un poco complicada y más sencilla.

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

Acabo de hacer uso del marcador de posición . El color predeterminado del marcador de posición de material es light gray. Para que parezca que la opción está seleccionada, simplemente manipulé el CSS de la siguiente manera:

::ng-deep .mat-select-placeholder {
    color: black;
}

La vinculación o configuración del valor predeterminado funciona solo si el atributo de valor en MatSelect es comparable al atributo de valor vinculado a MatOption . Si vincula captionsu artículo al atributo de valor del elemento mat-option , también debe establecer el elemento predeterminado en mat-select to captionde su artículo. Si enlaza Idsu artículo a mat-option , debe enlazar ida mat-select , no a un artículo completo, título o cualquier otro, solo el mismo campo.

Pero debes hacerlo con enlace []

Seguí lo anterior con mucho cuidado y todavía no pude seleccionar el valor inicial.

La razón fue que, aunque mi valor vinculado se definió como una cadena en mecanografiado, mi API de backend estaba devolviendo un número.

La escritura suelta de Javascript simplemente cambió el tipo en tiempo de ejecución (sin error), lo que impidió la selección del valor inicial.

Componente

myBoundValue: string;

Modelo

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

La solución fue actualizar la API para devolver un valor de cadena.

Una forma muy sencilla de lograr esto es usar un formControlvalor predeterminado, dentro de unFormGroup (opcional) por ejemplo. Este es un ejemplo que usa un selector de unidad para una entrada de área:

ts

H_AREA_UNIT = 1;
M_AREA_UNIT = 2;

exampleForm: FormGroup;

this.exampleForm = this.formBuilder.group({
  areaUnit: [this.H_AREA_UNIT],
});

html

<form [formGroup]="exampleForm">
 <mat-form-field>
   <mat-label>Unit</mat-label>
   <mat-select formControlName="areaUnit">
     <mat-option [value]="H_AREA_UNIT">h</mat-option>
     <mat-option [value]="M_AREA_UNIT">m</mat-option>
   </mat-select>
 </mat-form-field>
</form>

Una comparación entre un número y una cadena suele ser falsa suele , por lo tanto, transfiera el valor seleccionado a una cadena dentro de ngOnInit y funcionará.

Tuve el mismo problema, llené el mat-select con una enumeración, usando

Object.keys(MyAwesomeEnum).filter(k => !isNaN(Number(k)));

y tenía el valor de enumeración que quería seleccionar ...

Pasé algunas horas luchando con mi mente tratando de identificar por qué no estaba funcionando. Y lo hice justo después de renderizar todas las variables que se utilizan en mat-select, la colección de claves y el seleccionado ... si tiene ["0", "1", "2"] y desea seleccionar 1 ( que es un número) 1 == "1" es falso y por eso no se selecciona nada.

Entonces , la solución es convertir el valor seleccionado en una cadena dentro de ngOnInit y funcionará.

Hice esto.

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

Normalmente puede hacerlo [value]="option", a menos que obtenga sus opciones de alguna base de datos. Creo que la demora en obtener los datos hace que no funcionen, o los objetos obtenidos son diferentes de alguna manera a pesar de que son iguales. Curiosamente, es muy probable que sea el último, ya que también lo intenté [value]="option === selected ? selected : option"y no funcionó.

TS

   optionsFG: FormGroup;
   this.optionsFG = this.fb.group({
       optionValue: [null, Validators.required]
   });

   this.optionsFG.get('optionValue').setValue(option[0]); //option is the arrayName

HTML

   <div class="text-right" [formGroup]="optionsFG">
     <mat-form-field>
         <mat-select placeholder="Category" formControlName="optionValue">
           <mat-option *ngFor="let option of options;let i =index" [value]="option">
            {{option.Value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
  </div>