Menu
I need to do an equivalent of this in Angular2:
<?php foreach ($somethings as $something) { foreach ($something->children as $child) { echo '<tr>...</tr>'; } } Can this be achieved with ngFor and not adding new elements between <table> and <tr>?
662
We can nest muliple NgFor directives together. We can get the index of the item we are looping over by assigning index to a variable in the NgFor expression.
You can't use multiple *ngFor s in the same element as those are structural directives and angular handles them in a specific way (basically for each structural directive it creates an ng-template element which then holds the directive itself, you can read more about it here: https://angular.io/guide/structural- ...
I have a sample that might be similar to what you want:
<table id="spreadsheet"> <tr *ngFor="let row of visibleRows"> <td class="row-number-column">{{row.rowIndex}}</td> <td *ngFor="let col of row.columns"> <input data-id="{{col.rowIndex}}-{{col.columnIndex}}" [value]="col.cellValue" (input)="col.cellValue = $event.target.value" (click)="model.selectColumn(col)" (keyup)="navigate($event)" /> </td> </tr> </table> I use this to render out a spreadsheet looking grid as seen here: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
