As pointed out in @Eric comment, and after lots of reading and playing around, here is how to use trackBy in angular2 the first thing you need to know its not same syntax as angular1, now you need to separate it from the for loop with a ;. Usage 1: Track by property of object … Read more
Angular 2, 4 and Angular 5 compatible! You have provided so few details, so I’ll try to answer your question without them. You can use Interpolation: <img src={{imagePath}} /> Or you can use a template expression: <img [src]=”imagePath” /> In a ngFor loop it might look like this: <div *ngFor=”let student of students”> <img src={{student.ImagePath}} … Read more
ngFor and ngForOf are not two distinct things – they are actually the selectors of the NgForOf directive. If you examine the source, you’ll see that the NgForOf directive has as its selector: [ngFor][ngForOf] , meaning that both attributes need to be present on an element for the directive to ‘activate’ so to speak. When … Read more
Your extractData (and possibly also your HTTP API) is returning an object {} – ngFor requires an array [] to iterate. Change your service/API to produce an array, or transform the object in your component.
This happens when the array is a primitive type, in your case a String array. This can be solved by using TrackBy. So change your template to match the following: <div *ngFor=”let value of field.values; let i=index; trackBy:trackByFn”> <input type=”text” [(ngModel)]=”field.values[i]” /><br/> </div> <div> <button (click)=”addValue(field)”>Click</button> </div> and in the ts file add the function … Read more
On each ngDoCheck triggered for the ngForOf directive, Angular checks what objects have changed. It uses differs for this process and each differ uses the trackBy function to compare the current object with the new one. The default trackBy function tracks items by identity: const trackByIdentity = (index: number, item: any) => item; It receives … Read more
I missed let in front of talk: <div *ngFor=”let talk of talks”> Note that as of beta.17 usage of #… to declare local variables inside of structural directives like NgFor is deprecated. Use let instead. <div *ngFor=”#talk of talks”> now becomes <div *ngFor=”let talk of talks”> Original answer: I missed # in front of talk: … Read more
Angular v2 doesn’t support more than one structural directive on the same element. As a workaround use the <ng-container> element that allows you to use separate elements for each structural directive, but it is not stamped to the DOM. <ng-container *ngIf=”show”> <div *ngFor=”let thing of stuff”> {{log(thing)}} <span>{{thing.name}}</span> </div> </ng-container> <ng-template> (<template> before Angular v4) … Read more
I would use this syntax to set the index value into an attribute of the HTML element: Angular >= 2 You have to use let to declare the value rather than #. <ul> <li *ngFor=”let item of items; let i = index” [attr.data-index]=”i”> {{item}} </li> </ul> Angular = 1 <ul> <li *ngFor=”#item of items; #i … Read more