I'm trying to align the html table correctly but it comes off. The challenge that I have is with respect to the inner loop (modification) which is a list inside of Revision (in other words Revision 'has a' modification list.
While the result on screen are correct, the table is completely off. I speculate the problem is in the 2 *ngFor loop. Any pointer?
<table class="table table-striped">
<thead>
<tr>
<th>Revision No</th>
<th>Date</th>
<th>Username</th>
<th>Field</th>
<th>Old Value</th>
<th>New Value</th>
</tr>
</thead>
<tbody>
<tr>
<div *ngFor="let r of revisions">
<div *ngFor="let m of r.modifications">
<td>{{r.revision}}</a></td>
<td>{{r.date}}</td>
<td>{{r.username}}</td>
<td>{{m.forItem}}<td>
<td>{{m.oldInfo}}<td>
<td>{{m.newInfo}}</td>
</div>
</div>
</tr>
</tbody>
</table>
Nothing can go between your tr and td. Put the first ngfor in a tbody wrapped around your tr. Then put your second ngfor on the tr
You can't have a <div> at that position inside a table
Use
<ng-container *ngFor="let r of revisions">
instead of
<div *ngFor="let r of revisions">
Related
I have an array of objects with nested arrays as shown below. How can I print the nested array values in a table using ngFor.
The array looks as follows:
I am using a table to print this values so I can export the table to Excel sheet.
The table looks as follows:
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Hours</th>
<th>Dates</th>
<th>Project Codes</th>
</tr>
</thead>
<tbody class="tbody" *ngFor="let value of array; let i = index">
<tr *ngFor="let item of array[i].item; let dateValue of array[i].datesArray; let h of array[i].hours">
<td>{{h}}</td>
<td>{{dateValue}}</td>
<td>{{value.projectCodeInput}}</td>
</tr>
</tbody>
</table>
I am using multiple arrays on single tag in ngFor like this:
{*ngFor="let item of array[i].item; let dateValue of array[i].datesArray; let h of array[i].hours"}
I know this is wrong way, but somehow the hours prints in the output in both places overriding the dateValue in second column.
Is there a way to print the values from hours, dateValue array in the same element(TABLE)?
Instead of having multiple inputs to the *ngFor directive, you could move the let i=index to the inner loop and use it to get the values.
I assume all the sub-arrays will always be of equal length i.e. hours, datesArray and item array will always be of equal length.
If you wish to span the projectCodeInput property across multiple rows since it'll be the same for each element of the parent array, you could do so using [attr.rowspan] property and first local variable of the *ngFor directive. The check is to make sure the span element is rendered only once for the loop.
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Hours</th>
<th>Dates</th>
<th>Project Codes</th>
</tr>
</thead>
<tbody class="tbody" *ngFor="let element of arr">
<tr *ngFor="let item of element.item; let i=index; let f=first">
<td>{{element.hours[i]}}</td>
<td>{{element.datesArray[i]}}</td>
<td *ngIf="f" [attr.rowspan]="element.item.length">{{element.projectCodeInput}}</td>
</tr>
</tbody>
</table>
Working example: Stackblitz
You could use the index of the inner loop and get the values with this index z:
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Hours</th>
<th>Dates</th>
<th>Project Codes</th>
</tr>
</thead>
<tbody class="tbody" *ngFor="let value of array; let i = index">
<tr *ngFor="let item of array[i].item; let z = index">
<td>{{array[i].hours[z]}}</td>
<td>{{array[i].datesArray[z]}}</td>
<td>{{value.projectCodeInput}}</td>
</tr>
</tbody>
</table>
I have two div elements and my requirement is how do I pass the id of present in second div element and is getting executed in the loop to the first div element button. Here is the sample code :
<div style="float: right;">
<button type="button" (click)="delete(skillGroupAndTypeRow.id);"></button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Select</th>
<th>Skill Group Names</th>
<th>Skill Type</th>
</tr>
</thead>
<tbody>
<tr #skillGroupAndTypeRow *ngFor="let group of groups; let i=index;" id="skillRow-{{i}}">
<td>
<input type="checkbox" id="group-{{i}}" >
</td>
<td>{{group.name}}</td>
<td>{{group.type}}</td>
</tr>
</tbody>
</table>
So how do I pass the Id of tag into the delete button present in above div.
With this approach there is a error saying cannot read id of undefined.
So, my problem is so basic but i cant solve it.
I'm trying to create dynamic table header with *ngFor.
<table>
<tr>
<th>Entry Warehouse</th>
<th colspan="2" *ngFor="let data of datas">
SomeText
</th>
</tr>
<tr>
<th>More Text</th>
<div *ngFor="let data of datas">
<th>A little text again</th>
<th>A little text again</th>
</div>
</tr>
</table>
Anyway, this solution suicide themself at that point. If datas length more than 1, div tag is underscoring th tag in same cell.
If i try another solution like this;
<table>
<tr>
<th>Entry Warehouse</th>
<th colspan="2" *ngFor="let data of datas">
SomeText
</th>
</tr>
<tr>
<th>More Text</th>
<th *ngFor="let data of datas">A little text again</th>
<th *ngFor="let data of datas">A little text again</th>
</tr>
</table>
it looks like works but actually not. Because at this time the next th tag doesnt start before the previous loop ends.
In angular 2+ you can use<ng-container> tags
<ng-conatiner *ngFor="let i of items">
<th>i</th>
</ng-conatiner>
I am display large set of data content in table using ng-repeat and it contains only one <tr> element. I am trying to display odd row in one color and even row in another color. I am not getting how to display the striped color for single row by making use of ng-repeat. Please let me know where I am going wrong.
HTML:
<thead class="rowhead">
<tr>
<th class="mid">Sl.</th>
<th id="tnm">Name</th>
<th class="mid">Age</th>
<th class="mid">Members</th>
<th class="mid">View-content</th>
<th class="mid">on-going-Process</th>
</tr>
</thead>
<tbody ng-repeat="info in cspinfo">
<tr class="clr">
<td>{{$index+1}}</td>
<td id="bnm">{{info.name}}</td>
<td>{{info.age}}</td>
<td>{{info.member}}</td>
<td>{{info.View-content}}</td>
<td>{{on-going-Process}}</td>
</tr>
</tbody>
You can directly select the odd and even rows of table using the selector in css and apply style you need. You don't have to worry about the applying class to each row you create using ng-repeat.
tr:nth-child(odd){
background-color: #yourcolor
}
tr:nth-child(even){
background-color: #yourcolor
}
Here you can read more about css selectors https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
In your css define a rule for the style. Then in your html:
<tbody>
<tr class="clr" ng-class="{style-created: $index % 2 === 0}" ng-repeat="info in cspinfo">
<td>{{$index+1}}</td>
<td id="bnm">{{info.name}}</td>
<td>{{info.age}}</td>
<td>{{info.member}}</td>
<td>{{info.View-content}}</td>
<td>{{on-going-Process}}</td>
</tr>
</tbody>
I am using table-striped style provided by Bootstrap in a table. And I am using angular js to populate the data. It is not showing the table in stripe format. Can someone help me in recognizing the error that I am making?
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody ng-repeat="e in data.events">
<tr>
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
I think you meant to put the ng-repeat on the tr element instead of the body. You're repeating the body instead of rows.
Bootstrap alternates the colours on the rows, and since you are creating a new table body with 1 row each, it's only going to show one color.
I believe your issue is the placement of the repeat directive. If you move it to your tr element, it should be fine. As is, it is creating a new tbody element for each item in your events array. Since table-striped alternates the background color of even rows, and each tbody contains only 1 row, you aren't seeing that style applied.
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in data.events">
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in data.events">
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
This should work fine, but you need to repeat the table rows <tr>, not the table body <tbody>.