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

Ionic Framework ionic-v3
1

Hi,

I have the following html code:

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

and the following .ts file.

@Component({
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 ?

Thanks

2

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

3

Thanks,

But with this code, nothing is displayed :frowning:

Any suggestion ?

4

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

{{ filter.name }}

`
5

Thanks…

But nothing is displayed :frowning:

How is it possible ?

6

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 .

7

imageFilters != imagesFilters.

1 Like