ngfor | 易学教程

Exception: Can't bind to 'ngFor' since it isn't a known native property

阅读更多关于 Exception: Can't bind to 'ngFor' since it isn't a known native property

问题 What am I doing wrong? import {bootstrap, Component} from 'angular2/angular2' @Component({ selector: 'conf-talks', template: `<div *ngFor="talk of talks"> {{talk.title}} by {{talk.speaker}} <p>{{talk.description}} </div>` }) class ConfTalks { talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'}, {title: 't2', speaker: 'Julie', description: 'talk 2'}]; } @Component({ selector: 'my-app', directives: [ConfTalks], template: '<conf-talks></conf-talks>' }) class App {} bootstrap(App, []

Passing ngFor variable to an ngIf template

阅读更多关于 Passing ngFor variable to an ngIf template

问题 How do I pass the current variable in an ngFor loop to ngIf, if it is using templates with then/else syntax? It appears that they pass through fine when used inline, but aren't accessible from a template, for example: <ul *ngFor="let number of numbers"> <ng-container *ngIf="number % 2 == 0; then even_tpl; else odd_tpl"><>/ng-container> </ul> <ng-template #odd_tpl> <li>Odd: {{number}}</li> </ng-template> <ng-template #even_tpl> <li>Even: {{number}}</li> </ng-template> The templates don't seem

How to show 1 element in ngFor in angular2?

阅读更多关于 How to show 1 element in ngFor in angular2?

问题 I have a simple ngFor that loops through an array. However, I've added a condition that while the index is < 5 keep add the tag. and After that, I want to add an extra tag just once that will be used a dropdown to view the rest of the tags. But it doesn't work. <li *ngFor="let tag of module.Tags; let i = index"> <a *ngIf="i<5" href="#" class="span-tag tag">{{ tag }}</a> <div *ngIf="module.Tags.length > 5 && i == 6">DropDown Button</div> </li> The feature here is that I don't want to show

What is the difference between [ngFor] and [ngForOf] in angular2?

阅读更多关于 What is the difference between [ngFor] and [ngForOf] in angular2?

问题 As per my understanding, Both are doing the same functions. But, ngFor would be works like as collections?. ngForOf would be works like as generics?. Is my understanding is correct? or Could you please share more difference's(details) about ngFor and ngForOf ? 回答1: 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

Angular2 binding of “name” attribute in <input> elements with *ngFor

阅读更多关于 Angular2 binding of “name” attribute in elements with *ngFor

问题 I am experimenting with Angular2 and Angular Material. I used *ngFor to let Angular generate the <input> elements for me. However, in the resulting webpage, the generated element does not have name attribute. This is part of the code in order-form.component.html , which asks the user to input the number of different kinds of fruits: <md-list-item> <md-icon md-list-icon>shopping_cart</md-icon> <md-input-container *ngFor="let fruit of fruits" class="fruit-input"> <input mdInput [(ngModel)]=

Does ngFor directive re-render whole array on every mutation?

阅读更多关于 Does ngFor directive re-render whole array on every mutation?

问题 Let's say we have an array of items: items = [ { title: 'item 1'}, { title: 'item 2'}, /* ... */ ]; And there is a template that renders this array: <ul> <li *ngFor="let item of items">{{item.title}}</li> </ul> Wll angular2 rerender the whole array if I add/remove items via push / splice or will it only add/remove the markup for the corresponding items? If it does updates only, then is there any difference in mutation stategies -- should I prefer push/splice over array replacing? In other

how to use track by inside ngFor angular 2

阅读更多关于 how to use track by inside ngFor angular 2

tried every syntax i can guess couldnt make it works !  <ion-card *ngFor="#post of posts"> {{post|json}} </ion-card>  <ion-card *ngFor="#post of posts track by post.id"> {{post|json}} </ion-card>  <ion-card *ngFor="#post of posts;trackBy:post.id"> {{post|json}} </ion-card>  <ion-card *ngFor="#post of posts;trackBy:posts[index].id"> {{post|json}} </ion-card>  <ion-card *ngFor="

iteration a json object on Ngfor in angular 2

阅读更多关于 iteration a json object on Ngfor in angular 2

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": { "label": "A1", "HTTPMethod": "POST", "actionType": "indexation", "status": "active", "description": "Ajout d'une

How to create variable in ngFor loop?

阅读更多关于 How to create variable in ngFor loop?

问题 I am trying to find out how to create a variable in an ngFor loop . I have a loop like this: <td *ngFor="#prod of products"> <a href="{{getBuild(branch,prod)?.url}}"> {{getBuild(branch,prod)?.status}} </a> </td> You can see the the getBuild call has to be repeated multiple times. (Many more times in my actual example). I would like a way to create this variable in the template once inside the loop and simply reuse it. Is there a way to do this? 回答1: I think local variables (defined with the #

ngFor with index as value in attribute

阅读更多关于 ngFor with index as value in attribute

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 value in the data-index attribute? Thierry Templier I would use this syntax to set the index value into an