Quiero cambiar la imagen dinámicamente en mi etiqueta <img [src]="" />
con el object
que traigo desde una API
https://reqres.in/api/users usando el selector de opciones de material:
<!-- Esta es la imagen que quiero cambiar por medio del mat-option -->
<img [src]="object[idSelecionado].avatar" alt="Foto de la persona" />
<mat-form-field appearance="fill" >
<mat-label>Persona</mat-label>
<mat-select >
<mat-option *ngFor="let persona of object" [value]="persona.id">
{{ persona.first_name }}
</mat-option>
</mat-select>
</mat-form-field>
Este es el servicio con el que traigo el objeto desde la API:
@Injectable({
providedIn: 'root'
})
export class PhotosService {
constructor(private _http: HttpClient) { }
getPhotos(id):Observable<any>{
return this._http.get('https://reqres.in/api/users');
}
}
Y este es mi componente en donde quiero poner que cada vez que seleccione un nombre del <mat-option>
me cambie la imagen sin necesidad de recarga la pagina o presionar un botón:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
title = 'angular-material';
object: any;
id;
idSelecionado;
constructor(public photos: PhotosService) {
this.idSelecionado = 0;
}
ngOnInit() {
this.photos.getPhotos(this.id).subscribe(
result => {
this.object = result.data;
console.log(this.object);
console.log(this.object.first_name)
}
)
}
}
Obtengo los nombres de las personas dentro de mi <mat-option>
pero no se como transportar esa selección para que cambie la imagen que le corresponde a cada persona dinámicamente.
object[idSeleccionado].avatar
?