Estoy desarrollando una aplicación que integra Angular (frontend) y Yii2 (backend). Hasta ahora no tuve grandes dificultades excepto por las últimas semanas que me he estancado con un problema de Angular Material. Estuve explorando muchas soluciones en Internet, pero hasta ahora no tuve suerte.
Estoy tratando de crear un formulario de carga que tiene alrededor de 10 elementos Autocomplete de Angular Material. La información la recopilo desde un Servicio Angular como observable. La misma llega por API Rest desde el backend. En cada elemento Autocomplete muestro con facilidad las opciones a elegir, pero el problema radica cuando intento obtener únicamente el ID del objeto (para una posterior alta). Si bien lo obtengo, la propiedad DisplayWith me devuelve el valor del ID cuando en realidad quiero que me devuelva todo el objeto así puedo volver a visualizar la opción seleccionada por el usuario, por ejemplo, nombre y apellido.
En la web encontré como solucionar este problema con arreglos de objetos o simples arreglos, pero no sé cómo solucionarlo utilizando observables. Capaz estoy encarando mal toda la situación. Estuve leyendo, entre muchos otros, este aporte pero desafortunadamente no encontré la solución. Desde ya muchas gracias y cualquier ayuda será muy apreciable.
Este es mi código, muestro el ejemplo con un único elemento autocomplete.
Angular componente
import { Component, OnInit } from '@angular/core';
import { FormBuilder,FormGroup, Validators, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, debounceTime, switchMap, map, distinctUntilChanged } from 'rxjs/operators';
import { DedicacionI } from '../../../models/dedicacion.interface'
import { DedicacionesService } from 'src/app/services/dedicaciones.service';
export class DocenteAltaComponent implements OnInit {
myForm = new FormGroup()
myControlDedicaciones = new FormControl();
dedicacionesList: Observable<DedicacionI[]>;
filteredOptionsDedicaciones: Observable<DedicacionI[]>;
constructor (
public fb:FormBuilder,
private dedicaciones:DedicacionesService,
)
{
this._getDedicacionesData();
this.filteredOptionsDedicaciones = this.myControlDedicaciones.valueChanges.pipe(
startWith(null),
debounceTime(200),
distinctUntilChanged(),
switchMap(val => {
return this._filterDedicaciones(val || '')
})
)
}
private _getDedicacionesData():void {
this.dedicacionesList = this.dedicaciones.getDedicaciones();
}
private _filterDedicaciones(val: string) {
return this.dedicacionesList.pipe(
map(response => response.filter(option => {
let aux = option.denominacion.toString();
return aux.toLowerCase().indexOf(val.toString().toLowerCase()) === 0
}))
)
}
public displayDedicacion (dedicacionSel): string {
if (dedicacionSel != null){
return dedicacionSel.denominacion + " (" + dedicacionSel.codigo + ")";
}else{
return "";
}
}
}
Angular html
<form [formGroup]="myForm" (ngSubmit)="save(myForm.value)">
<!-- Dedicaciones -->
<p>
<mat-form-field class="example-full-width">
<input type="text"
placeholder="Dedicación"
aria-label="Number"
matInput
[formControl]="myControlDedicaciones"
[matAutocomplete]="autoDededicacion">
<mat-autocomplete autoActiveFirstOption #autoDededicacion="matAutocomplete" [displayWith]="displayDedicacion">
<mat-option *ngFor="let option of filteredOptionsDedicaciones | async" [value]="option">
<p>{{option.denominacion}} ({{option.codigo}}) </p>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</p>
<!-- /.Dedicaciones -->
</form>
Angular servicio
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DedicacionI } from '../models/dedicacion.interface';
@Injectable()
export class DedicacionesService {
constructor(private http:HttpClient) { }
getDedicaciones() {
return this.http.get<DedicacionI[]>("http://localhost/yii2-tests/rest/web/index.php/v1/dedicaciones")
}
}