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
Your people object isn’t an array so you can iterate over it out of the box. There is two options: You want to iterate over a sub property. For example: <ul> <li *ngFor=”#person of people?.actionList?.list”> {{ person.label }} </li> </ul> You want to iterate over the keys of your object. In this case, you need … Read more
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
Or instead of creating a pipe and passing an object to *ngFor, just pass Object.keys(MyObject) to *ngFor. It returns the same as the pipe, but without the hassle. On TypeScript file: let list = Object.keys(MyObject); // good old javascript on the rescue On template (html): *ngFor=”let item of list”
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.
The caculateFunction(data.price) function will be called every time Angular runs change detection for the component (more precisely for the embedded view created by ngFor). This is because updating DOM is part of change detection and Angular needs to call caculateFunction to know what value to use for DOM update. And change detection cycle can run … Read more
You can use @ViewChildren for that purpose @Component({ selector: ‘my-app’, template: ` <ul *ngIf=”!isHidden”> <li #allTheseThings *ngFor=”let i of items; let last = last”>{{i}}</li> </ul> <br> <button (click)=”items.push(‘another’)”>Add Another</button> <button (click)=”isHidden = !isHidden”>{{isHidden ? ‘Show’ : ‘Hide’}}</button> `, }) export class App { items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; … Read more
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
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
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