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>
Related
I have the following table where in the table is generated using an array:
<tbody *ngFor="let ques of questArray;let i =index">
<tr *ngif="catId == ques.categoryID">
<td> {{i}} </td>
I need to add a serial number to the column
But the problem is there is an *ngif that will filer the array with different categories
So if do {{i}} the numbers now list like
1,2,5,6,7,11
I want to list like 1,2,3,4,5 without break.
Also in the new category, `
I need to restart numbering from 1 instead of continuing.
`
Can i use another *ngFor for serial number, also is it possible to restart the number is each ngif condition
Add a new key in element of questArray.
For example in ts file,
let sno = 1;
for(let i=0; i < questArray; ++i){
let ques = questArray[i];
if(this.catId == ques.categoryID){
questArray[i]['sno'] = sno++;
}
}
And use that in template like below,
<tbody *ngFor="let ques of questArray;let i =index">
<tr *ngif="catId == ques.categoryID">
<td> {{ques.sno}} </td>
I have a table which contains list of informations from the database my problem how I can display the information of each line ,below this line,in other words i want more information about this line.
I have already managed to display the information but below the table .
<tbody>
<ng-container>
<tr *ngFor="let affectation of affectations">
<td>{{affectation[1]}}</td>
<td>{{affectation[2] }}</td>
<td>{{affectation[3]}}</td>
<td><button type="button" class="btaction"
(click)="getAffectationForEmploye(affectation[0])">Actionner</button></td>
--after clicking show more information about the line of table 1
</tr>
--show informations about the line of table 1
<tr [hidden]="!visionnerTableau" class="trDisplay" *ngFor="let affecter of affecters">
<td>{{affecter.fiche.nom}}</td>
<td>{{affecter.fiche.prenom}}</td>
<td>{{affecter.fiche.produit.nom_produit}}</td>
</tr>
</ng-container>
</tbody>
you should place the first for loop on the ng-container and if you just want to show information of 1 line at a time, you can use the index for this and a selectedItemIndex in your component and probably an ngIf instead of hidden to only invoke getAffectationForEmploye for the selected item. So something like this:
<tbody>
<ng-container *ngFor="let affectation of affectations; let i = index;">
<tr>
<td>{{affectation[1]}}</td>
<td>{{affectation[2] }}</td>
<td>{{affectation[3]}}</td>
<td><button type="button" class="btaction"
(click)="selectedItemIndex = index;">Actionner</button></td>
--after clicking show more information about the line of table 1
</tr>
--show informations about the line of table 1
<ng-container *ngIf="selectedItemIndex === index">
<tr class="trDisplay" *ngFor="let affecter of getAffectationForEmploye(affectation[0])">
<td>{{affecter.fiche.nom}}</td>
<td>{{affecter.fiche.prenom}}</td>
<td>{{affecter.fiche.produit.nom_produit}}</td>
</tr>
</ng-container>
</ng-container>
</tbody>
I have the following JSON response from a web service. I want to use it on the front end but the "codeSubstance" is not showing anything. How do I parse it correctly ?
I've tried the following :
<tr *ngFor ="let m of medicamentsDetailslist;">
<td>{{m.compositions.substancesActives.codeSubstance}}</td>
</tr>
and this also
<tr *ngFor ="let m of medicamentsDetailslist;">
<td>{{m.compositions.substancesActives["codeSubstance"]}}</td>
</tr>
Any help appreciated
compositions and substancesActives are again an array, so you should be iterating over it again
<tr *ngFor ="let m of medicamentsDetailslist;">
<td>
<ng-container *ngFor="let comp of m.compositions">
<ng-container *ngFor="let sub of comp.substancesActives">
{{sub.codeSubstance}}
</ng-container>
</ng-container>
</td>
</tr>
hi i think you have an array in substancesActives, so try this :
<tr *ngFor ="let m of medicamentsDetailslist;">
<td>{{m.compositions.substancesActives[0].codeSubstance}}</td>
</tr>
If it's ok, so add a new loop for substanceActives
EDIT (more details in comments) :
m.compositions[0].substancesActives[0].codeSubstance
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'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