ngfor

问题 I want to display a dataList. Some values are calculate from a function. It seems angular2 calls the calculate function many times. <tr *ngFor="let data of dataList"> <td>{{ data.no }}</td> <td>{{ data.name }}</td> <td>{{ calculateFunction(data.price) }}</td> </tr> Console will output "calculate..." many times, more than dataList.length. calculateFunction() { console.log('calculate...'); return ...; } Should I worry about that for performance or just let angular2 do this? 回答1: The

问题 In my project I am getting data: image src , student name and student id . I bind student name and student id . How to bind image src in angular 2 ? 回答1: 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

问题 I\'m having trouble iteration a json object in the Ngfor, there is my template : template: <h1>Hey</h1> <div>{{ people| json}}</div> <h1>***************************</h1> <ul> <li *ngFor=\"#person of people\"> {{ person.label }} </li> </ul> people is the json object that I\'m trying to iterate, I\'m having rhe result of (people | json) and not getting the list, here is a screenshot: and to finish, here is a part of json file : { \"actionList\": { \"count\": 35, \"list\": [ { \"Action\": { \

问题 tried every syntax i can guess couldnt make it works ! <!--- THIS WORKS FINE ---> <ion-card *ngFor=\"#post of posts\"> {{post|json}} </ion-card> <!--- BLANK PAGE ---> <ion-card *ngFor=\"#post of posts track by post.id\"> {{post|json}} </ion-card> <!--- Exception : Cannot read property \'id\' of undefined ---> <ion-card *ngFor=\"#post of posts;trackBy:post.id\"> {{post|json}} </ion-card> <!--- Exception : Cannot read property \'undefined\' of undefined ---> <ion-card *ngFor=\"#post of posts

问题 Looks like something wrong with freight variable in HTML: Error in app/freightList.component.html:13:8 Error trying to diff \'[object Object]\' Below is code freight.service.ts ======================= getFreight (): Promise<Freight[]> { return this.http.get(this.freightUrl) .toPromise() .then(this.extractData) .catch(this.handleError); } private extractData(res: Response) { let body = res.json(); return body || { }; } freightList.component.ts ======================== getFreight() { this

问题 In Angular 1 I have written a custom directive (\"repeater-ready\") to use with ng-repeat to invoke a callback method when the iteration has been completed: if ($scope.$last === true) { $timeout(() => { $scope.$parent.$parent.$eval(someCallbackMethod); }); } Usage in markup: <li ng-repeat=\"item in vm.Items track by item.Identifier\" repeater-ready=\"vm.CallThisWhenNgRepeatHasFinished()\"> How can I achieve a similar functionality with ngFor in Angular 2? 回答1: You can use something like this

问题 I have a simple ngFor loop which also keeps track of the current index . I want to store that index value in an attribute so I can print it. But I can\'t figure out how this works. I basically have this: <ul *ngFor=\"#item of items; #i = index\" data-index=\"#i\"> <li>{{item}}</li> </ul> I want to store the value of #i in the attribute data-index . I tried several methods but none of them worked. I have a demo here: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview How can I store the index

问题 I am trying to render object properties using keys in angular2 using below code: <ul> <li *ngFor=\"let element of componentModel | keys;let i=index\"> {{element.key}}--{{element.value}} // 1---Bhushan...loaded only once <span *ngIf=\"element\">{{ loadProperty(i,element) }}</span> </li> </ul> But I am facing a problem here. The output in the browser in loaded only once. but the method call i.e. loadProperty(i,element) is running in an infinite loop. loadProperty(i:number,element:any){ console

问题 I\'m having a problem with trying to use Angular\'s *ngFor and *ngIf on the same element. When trying to loop through the collection in the *ngFor , the collection is seen as null and consequently fails when trying to access its properties in the template. @Component({ selector: \'shell\', template: ` <h3>Shell</h3><button (click)=\"toggle()\">Toggle!</button> <div *ngIf=\"show\" *ngFor=\"let thing of stuff\"> {{log(thing)}} <span>{{thing.name}}</span> </div> ` }) export class ShellComponent