Ng-repeat : display only the first element, why?


I have the following html code:

	<a ng-repeat="filter in imageFilters">
	<p>{{ name }}</p>
	<img id="{{id}}" class="img-filter" [src]="image">

and the following .ts file.

selector   : 'photo-filter',
templateUrl: 'photo-filter.html'

export class PhotoFilter {

image : any;

imagesFilters = [
		name  : 'Normal',
		id    : 'normal'
		name  : 'Claredon',
        id    : 'claredon'
		name  : 'Gingham',
        id    : 'gingham'

constructor(private navParams: NavParams) {

this.image     = this.navParams.get('base64');



But only one image is displayed, and no name is displayed.

I’m a newbie, so can you let me know what the issue is ?


Try it like this
<a *ngFor="let filter of imageFilters"> <p>{{ }}</p> <img id="{{}}" class="img-filter" [src]="image"> </a>
also you should consider wrapping your links in an ion-list .


But with this code, nothing is displayed :frowning:

Any suggestion ?

How about this
<ion-item *ngFor=“let filter of imageFilters”>

{{ }}



But nothing is displayed :frowning:

How is it possible ?

Weird , the second reply is a code snippet I use frequently , perhaps someone else could notice the problem and shed some light on the matter .

imageFilters != imagesFilters.

1 Like