ngfor

I´m fairly new to Angular2, and i want to read out a json file. It´s working, that I get the file from a REST-Client, i can save the file in a local variable in a component and furthermore I´m able to read properties of the variable. Now I´m trying to read other properties (Array) with ngFor, but this isn´t working. Here´s the html: //Working <td>{{status.rights}}</td> //Not working <tr *ngFor="let folder of status.recfolders"> <td>{{folder.text}}</td> <td>{{folder.size}}</td> <td>{{folder.free}}</td> </tr> And the JSON: { "status": { "rights": "full", "recfiles": "13", "recfolders": { "folder

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 posted below. Note that the first teacher is missing from the repeated block, but not in the json

Im trying to pass an ngFor item into a pipe as a paramter but get an error: Exception: Call to Node module failed with error: Error: Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined ("{{name}} ng-container [ERROR ->]*ngFor="let rating of ratings | groupFilter:{{name}} " This is the html: <tr *ngFor="let name of measureNames"> <td>{{name}}</td> <td><input class="form-control"></td> <ng-container *ngFor="let rating of ratings | groupFilter:{{name}} "> <ng-container *ngFor="let key of rating | keys"> <td *ngIf="key=='measureRating'"><input class="form-control"

I have a strange behaviour of @ViewChildren corresponding to children components generated by ngFor. @ViewChildren query does not see element standing in array for a quite long time. All my code is in the Plunker - see with console opened. This is my main component: @Component({ selector: 'my-app', template: ` <button (click)="addInternalComponent()">Add internal component</button> <app-internal #internals *ngFor="let i of indexes" [index]="i (afterViewInit)="onAfterViewInit()"></app-internal> `, }) export class App { @ViewChildren('internals') internals: QueryList<InternalComponent>; indexes

I'm using *ngFor to iterate some data like this: <div *ngFor="let d of [1, 2, 3]"> {{d}} </div> Everything is fine and I got the result as expected: <div> 1 </div> <div> 2 </div> <div> 3 </div> Then, I wondered if I use a function instead of {{d}} , so I wrote a function: protected logAndReturn(item) { console.log(item); return item; } and I used it: <div *ngFor="let d of [1, 2, 3]"> {{logAndReturn(d)}} </div> I got the same rendered HTML result as the first code, but console output wasn't my expected output. Console output: 1 2 3 1 2 3 Angular is running in the development mode. Call

I made the following structure in my json file with Firebase Real Time Database to work on Composer and his Compositions: I have the following service that give me the data of one composer with his composition getComposerWithKey(key: string): Observable<Composer> { const memberPath = `composer/${key}`; this.composer = this.db.object(memberPath) .snapshotChanges().map(action => { const $key = action.payload.key; const arrcompositions = action.payload.val().compositions?Object.entries(action.payload.val().compositions):null; const data = { $key, arrcompositions, ...action.payload.val() }; return

I have a problem with filter in my JSON array when I move my app to Angular2 . In Angular 1.x that was easier. I used 'unique' in filter and this remove all duplicates. apps: {"app":"database_1", "host":"my_host1", "ip":"00.000.00.000" }, {"app":"database_1", "host":"my_host1", "ip":"00.000.00.000" }, {"app":"database_2", "host":"my_host2", "ip":"00.000.00.000" }, {"app":"database_2", "host":"my_host2", "ip":"00.000.00.000" } Part of html code: <div *ngFor='#appsUnique of apps '> <div class="row dashboard-row"> <div class="col-md-2"> <h4>{{appsUnique.app }}</h4> </div> </div> </div> And result