ngfor

Can ngForIn be used in angular 4?

由 僤鯓⒐⒋嵵緔 提交于 2019-12-05 05:06:49
I am trying to iterate over the properties of an object using *ngFor but using in . When I try to do this @Controller({ selector: 'sample-controller', template: ` <ul> <li *ngFor="let i in obj"> <b>{{i}}</b>: {{obj[i]}} </li> </ul>` }) class SampleController { obj = {a: 1, b: 2} } I get the error message: Can't bind to 'ngForIn' since it isn't a known property of 'li'. I have included FormsModule and BrowserModule in the imports section of the @NgModule for this component. Is it possible to use ngForIn on li and if not is there an idiomatic alternative? As AJT_82 mentioned in comment you can

How to set formControlNames using *ngFor in Angular?

由 淺唱寂寞╮ 提交于 2019-12-04 19:30:50
I'm trying to set form control using *ngFor over objects in an Array. Depending on the users sometimes I will have 1 object in the Array but other times multiple. My issue is that I want to create a formControlName using the loop which I can but not sure how to set form group validators in the component? Just setting them like below means if there is only 1 object the form remains invalid while looking for the other formControlName that does not exist. So if the first object with name:"Days" isn't in the list, "Days" would still be in this.form and shows up in controls: Array: indicators = [

How to iterate through an Object attributes in Angular 2

由 烈酒焚心 提交于 2019-12-04 15:38:31
问题 Here's my object (It has n number of dynamic keys. I've only shown two in the example below) let obj = { abc:["some text", "some more text"], xyz:["more text", "what do you think?", "I'm tired now"] } Here's my attempt to loop throw the above and print all the values <div *ngFor='let item of obj ; let i = index;'> <p *ngFor="let value of obj.i">{{value}} </div> But the above doesn't appear to work. What am I doing wrong and what's the correct syntax? 回答1: You could do something like this: <li

Multiple transclusion using ngFor in Angular2

由 爷，独闯天下 提交于 2019-12-04 05:57:35
I'm pretty new in angular2 and I'm trying to make a small angular component called " grid " that simply rearranges its content using transclusion. Its template grid component template (grid.component.ts) <div class="grid"> <div class="row"> <div class="col-xs-4"> <ng-content select="[grid-item-index=0]"></ng-content> </div> <div class="col-xs-4"> <ng-content select="[grid-item-index=1]"></ng-content> </div> <div class="col-xs-4"> <ng-content select="[grid-item-index=2]"></ng-content> </div> </div> <div class="row"> <div class="col-xs-4"> <ng-content select="[grid-item-index=3]"></ng-content> <

Angular 2 First Item in Array Missing using *ngFor

由 余生长醉 提交于 2019-12-04 04:50:03
问题 Using the angular quickstart app (https://github.com/angular/quickstart/blob/master/README.md). Using angular 2.1.1 Using *ngFor, the first item of the list doesn't appear on the page. I'm getting no errors in my console, but seeing the following console log output from the ngOnInit in teacher.component.ts : Erty Dave Sarah Walter undefined That last "undefined" means that the first element of the array is being redefined, but I don't know why. Here's a screenshot of the output -- the code is

Dynamically assign element id inside ngFor

由 不羁岁月 提交于 2019-12-04 02:03:35
I'm new to Angular 2, and i'm trying to give a dynamically assigned id for a div inside a *ngFor. I would like the divs to be called 'wave1, wave2, wave3' etc. <li *ngFor="let episode of episodes; let i = index"> <div id="wave{{i}}"></div> </li> However, this throws the following error: ERROR DOMException: Failed to execute 'querySelector' on 'Document': '#wave[object Object]' is not a valid selector. I haven't been able to find an answer to this for Angular 2 yet on stackoverflow. Apologies if this is a duplicate You can use {{ 'wave' + i }} instead of wave{{i}} . Make it as Angular

How to filter items inside “ngFor” loop, based on object property string

由 拟墨画扇 提交于 2019-12-04 01:25:43
I need to filter items inside an ngFor loop, by changing the category in a drop-down list. Therefore, when a particular category is selected from the list, it should only list the items containing that same category. HTML Template: <select> <option *ngFor="let model of models">{{model.category}}</option> </select> <ul class="models"> <li *ngFor="let model of models" (click)="gotoDetail(model)"> <img [src]="model.image"/> {{model.name}},{{model.category}} </li> </ul> Items Array: export var MODELS: Model[] = [ { id: 1, name: 'Model 1', image: 'img1', category: 'Cat1', }, { id: 2, name: 'Model 2

Angular 2 performance IE11 *ngFor

由 ↘锁芯ラ 提交于 2019-12-03 17:33:07
问题 I'm trying Angular 2 and I noticed that performance on Internet Explorer 11 is dramatically slow while cycling with *ngFor over 1500 items. It takes about 25sec with IE11 whereas less then 1sec on other browsers. Pausing the debugger I noticed that the code constantly calls isNan function in es6-shim.js. Here the call stack: A working plnkr here: http://plnkr.co/edit/sEujClHmuCbrydIiYQYL?p=preview . The code is very simple: <ul *ngFor="#item of items"> <li>Item: {{item.itemKey}}</li> </ul> /

Angular2 *ngFor animation of pushed away elements

由 我只是一个虾纸丫 提交于 2019-12-03 17:03:22
问题 I've seen many animation tutorials for the entering or leaving elements ("New element" on the image below), but the rest of elements (Element 1 and 2), that are pushed apart usually just teleport to their new location. Is there a way to animate the other elements to move away nicely, like depicted in the attached image? 回答1: You can use angular2 animation API to achieve it. Plunker Example @Component({ selector: 'my-app', template: ` <div class="container"> <div *ngFor="let item of items; let

*ngFor how to bind each item in array to ngModel using index

由 ↘锁芯ラ 提交于 2019-12-03 15:04:24
问题 ===final updated== http://plnkr.co/edit/WKRBB7?p=preview since I use ngModel in a form, I must add name attribue. and my mistake is that I used same value as its name. <form #myform="ngForm"> <table> <tr *ngFor="let staff of staffs"> <td><input name="name" [(ngModel)]="staff.name">{{staff.name}}</td> </tr> </table> </form> after I change to belows, my problem is resolved. <form #my2form="ngForm"> <table> <tr *ngFor="let staff of staffs;let i = index"> <td><input name="staff.{{i}}.name" [
订阅 ngfor