lunes, 23 de octubre de 2017

Iterar un array con ngFor en Angular 4

Extraer datos de un array es muy fácil con Angular 4. Esto es realmente limpio y efectivo con Angular si además creamos el servicio de donde extraeremos la data, ya la declaremos en el servicio o hagamos la llamada a una API.

nuestro HTML del componente donde queramos mostrar una coleccion de imagenes.

<div *ngFor="let logo of logos">
<img src="{{logo.imagelink}}"/>
</div>

nuestro .component.ts quedaria asi.

export class GalleryComponent implements OnInit {
logos: Logo[]
  constructor(private logosService: LogosService) { }
  ngOnInit() {
  this.logos = this.logosService.getLogos();
  }
}

Recordemos que debemos importar el servicio y el modelo, siendo LogosService y Logo repectivamente.

Estamos realizando una llamada al método getLogos() donde le pasamos el array a logos, propiedad del componente que interpolaremos en el html a través del ngFor



No hay comentarios:

Publicar un comentario