I'm trying to print a table from a 2 dimensional array of objects, holding a attribute 'text'. It only prints the table rows, iterating through the fields doesn't work.
My component.html looks like this:
<section *ngIf="object">
<table>
<tr *ngFor="let row of array; let even = even; let odd = odd"
[ngClass]="{ odd: odd, even: even }">
<td class="field" *ngFor="let field of array[row]">
{{field.text}}
</td>
</tr>
</table>
</section>
The array: object[][] is filled correctly and i can log the 'text' attributes to the console. The Problem is: I don't know how to iterate through the 2nd dimension (*ngFor="let field of array[row]")
Assuming array is an array of arrays,
Your second ngFor should be *ngFor="let field of row"
You can't use array[row] since row contains the array of the second dimension and not the index.
<section *ngIf="object">
<table>
<tr *ngFor="let row of array; let even = even; let odd = odd"
[ngClass]="{ odd: odd, even: even }">
<td class="field" *ngFor="let field of row">
{{field.text}}
</td>
</tr>
</table>
</section>
Example
Related
I need to have an *ngFor of table rows, where each repetition consists in 2 rows, as shown here.
But in Angular the repetition is done for each row, not each 2:
<table>
<tr *ngFor="let row of rows; let i = index">
<td>{{row.somethingA}}</td>
<td>{{row.somethingB}}</td>
</tr>
</table>
What is the best way to approach this?
You can always use an ng-container.
<ng-container *ngFor="let row of rows; let i = index">
<tr>{{ row.something }}</tr>
<tr>{{ row.somethingElse }}</tr>
</ng-container>
i'm using this code:
<div *ngIf="gamedata.notOver" class="columns">
<div class="column has-text-centered" *ngFor="let board of boards; let i = index">
<table class="is-bordered" [style.opacity]="i == player ? 0.5 : 1">
<tr *ngFor="let row of board.tiles; let j = index">
<td *ngFor="let col of row; let k = index" (click)="boardListener($event)" [style.background-color]="col.used ? '' : 'transparent'" [class.win]="col.status == 'win'" [class.fail]="col.status !== 'win'" class="battleship-tile" id="t{{i}}{{j}}{{k}}">
{{ col.value == "1" ? (col.status == "hit" ? "💀" : "X") : (col.status == "miss" ? "⛶" : (col.status == "hit" ? "💀" : "🌊")) }}
</td>
</tr>
</table>
<hr>
</div>
</div>
to print the first element of an array of arrays that contains 2 elements, how can i choose to print the first or the second element without printing both of them? i need to do this since i have to put both of them in separate divs.
I assume the line that refers to the array of arrays is the board of boards one.
Try wrapping each array in an ng-content that has an ngIf directive as follows:
<div class="column has-text-centered" *ngFor="let board of boards; let i = index">
<ng-content *ngIf="i%2 == 0">
INSERT WHAT YOU WANT TO DISPLAY FOR FIRST ARRAY ITEM HERE
</ng-content>
<ng-content *ngIf="i%2 != 0">
INSERT WHAT YOU WANT TO DISPLAY FOR SECOND ARRAY ITEM HERE
</ng-content>
</div>
You may have to repeat some code, but it should work.
There is a markup:
<div class="scroll">
<table class="table table-striped">
<thead>
<tr>
<th>Image</th>
<th>Name</th>
<th>Author</th>
<th>Year</th>
<th>ISBN</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let book of bookService.bookList">
<td><img src="../../{{book.ImagePath}}" width="100" height="150"></td>
<td>{{book.Name}}</td>
<td>{{book.Author}}</td>
<td>{{book.Year}}</td>
<td>{{book.ISBN}}</td>
<td>{{book.Price}}</td>
<td>{{book.Count}}</td>
<td>
<input type="text" name="Count" [(ngModel)]="Count">
<button class="btn btn-block btn-outline-success" (click)="onAdd(book, Count)"><i class="fa fa-plus"></i></button>
</td>
</tr>
</tbody>
The last column looks like this:
The problem is the following: when filling one TextBox, all the TextBoxes in the column are filled.
How can I solve this problem? Tried to give unique names to text fields and to thrust this cell in form, but all the same did not work.
You need to give unique name to the input field using angular template
<input [name]="'count' + i" >
Where i is the index from the *ngFor
But I think the major issue you have is that you need to bind book.Count instead of just Count
In latter case you'll have one variable called Count and you bind the same variable to all of the input fields. You need to attach the variable to the book itself so it is unique.
All your inputs have the same [(ngModel)]="Count" and the same name so if you update one, all of them will be updated
You can fix that if you have an array of count instead. So it will be something like
<tr *ngFor="let book of bookService.bookList; let i = index">
...
<input type="text" [name]="'count' + i" [(ngModel)]="count[i]">
People are giving you the HTML way, I'm giving you the Angular way : trackBy functions.
*ngFor="let book of bookService.bookList; trackBy: book.Name"
This one should work but I've never tested it.
The one should work in any case :
*ngFor="let book of bookService.bookList; trackBy: customTB"
customTB(item, index) {
return `${index}-${item.Name}`;
}
You can't use the same name for your inputs.
To fix this, you can add an id populate by the index of the loop *ngFor
Try this :
<tr *ngFor="let book of bookService.bookList; let i = index">
<input type="text" name="Count_${i}" [(ngModel)]="count">
I am facing problem in showing dynamic table from JSON objects. I have two array. One array contains headers of the table and other array contains JSON objects.The problem is that I want the data to be shown in sequence of header array value from each JSON Object(each object is treated as row).
The code I have tried to show data is:
<table id="myTable">
<tr >
<th *ngFor="let head of FilteredKeys;let i =index" (click)="sortTable(i)">{{head}}</th>
</tr>
<tr *ngFor="let object of finalContactsArray;">
<td *ngIf="hasProp('FilteredKeys', 'id')">{{object.id}}</td>
<td *ngIf="hasProp('FilteredKeys', 'firstname')" >{{object.firstname}}</td>
<td *ngIf="hasProp('FilteredKeys', 'lastname')">{{object.lastname}}</td>
<td *ngIf="hasProp('FilteredKeys', 'prefix')">{{object.prefix}}</td>
</tr>
</table>
Filtered Key array is:
["id","firstname","prefix","lastname"]
finalContactArray is:
[{"id":"1","firstname":"Vikas"},{"id":"2","firstname":"Raj","lastname":""},{"id":"3","prefix":"Mr.","lastname":"sdsdfsd"},{"id":"4","prefix":"Mrs."},{"id":"5","firstname":"Hari","prefix":"Mr."}]
For demo of the problem the stackblitz is:
https://stackblitz.com/edit/angular-8cacgk
Here you can see that prefix column values are shown in lastname.How to get rid of this problem?
My working code:
<table id="myTable">
<tr >
<th *ngFor="let head of FilteredKeys;let i =index" (click)="sortTable(i)">{{head}}</th>
</tr>
<tr *ngFor="let object of finalContactsArray;">
<ng-container *ngFor="let head of FilteredKeys">
<td *ngIf="head==='id' && hasProp('FilteredKeys', 'id')">{{object[head]}}</td>
</ng-container>
<ng-container *ngFor="let head of FilteredKeys">
<td *ngIf=" head === 'prefix' && hasProp('FilteredKeys', 'prefix')" (click)="showalert()" style="cursor:pointer" >{{object[head]}}</td>
</ng-container>
<ng-container *ngFor="let head of FilteredKeys">
<td *ngIf=" head === 'firstname' && hasProp('FilteredKeys', 'firstname')" >{{object[head]}}</td>
</ng-container>
<ng-container *ngFor="let head of FilteredKeys">
<td *ngIf=" head === 'lastname' && hasProp('FilteredKeys', 'lastname')">{{object[head]}}</td>
</ng-container>
</tr>
If your data structure is this simple and the relationships are that direct, you can accomplish this with simple nested for loops:
<table id="myTable">
<tr >
<th *ngFor="let head of FilteredKeys;let i =index" (click)="sortTable(i)">{{head}}</th>
</tr>
<tr *ngFor="let object of finalContactsArray;">
<td *ngFor="let key of FilteredKeys"
(click)="key === 'prefix' && showalert()"
[ngStyle]="{'cursor': (key === 'prefix') ? 'pointer': 'default'}">
{{object[key] || ' '}}
</td>
</tr>
</table>
Just iterate through your rows and within rows iterate over your header keys to show the correct row property in the cell, and create cells for every column regardless of what the actual object contains. My example puts in a single space as a placeholder if no value for that column, but you could put whatever you want, all depends what your requirement is, but you need to create cells for every column, regardless of if the object has the property or not, otherwise the cells will never align correctly.
I have a table where tr is repeated using *ngFor a collection, the collection which have a child members which should be binded as related table.
Note This is similar to nested array but only difference the html is not inside the nested array. I have referenced ngFor deep nested array already
typescript class
export class CreateBooking{
id: number;
bookings: BookingItem[]; // This should repeat as parent rows,
}
export class BookingItem {
id: number;
bookingNumber: number;
relatedVehicles: BookingItem[]; //This should be repeated as child rows
}
Html
<table>
<tr *ngFor="let booking of createBooking.bookings;let bookingIndex = index;">
<td>
<input type="text"
[ngModel]="booking.serialType" name="serialType--{{bookingIndex}}" />
</td>
</tr>
<tr> *ngFor="let v of booking[parent].relatedVehicles;
let i = index;
let parent = booking[something];"
<td>
<input [(ngModel)]="v.bookingNumber"
(ngModelChange)="serialNumberChangedIndex(parentIndex,$event,i)"
name="bookingNumber--{{i}}"/>
</td>
</tr>
</table>
Question 1 - How would i get the index of parent row on the child row
Question 2 - As a alternative i tried a inside which contains another table which have child items, But even with td colspan="allcolumns" i couldn't achieve expected output.
Challenges
- if i design the like this
<tr *ngFor="let booking of createBooking.bookings;let bookingIndex = index;">
<td>
<input type="text"
[ngModel]="booking.serialType" name="serialType--{{bookingIndex}}" />
</td>
<td>
<table>
<tbody>
<tr> *ngFor="let v of booking.RelatedVehicles;let i = index;"
<td>
<input [(ngModel)]="v.bookingNumber"
(ngModelChange)="serialNumberChangedIndex(bookingIndex ,$event,i)"
name="bookingNumber--{{i}}"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
This way i could generate the Nested array but the child collection will start at the 2nd column, I need the child element as full row.
Working sample code stackblitz
Please help me with some
expected output
From your code above, I do not see any relation in the second tag to the first one, where as your data structure I see the need for a nested tag. I think you should use a tag for the outer loop and a tag for the inner loop.