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>
Related
I am new to angular. Just learning it.
I want to bind data with ngFor. but its not showing any data. Kindly help me to solve this
html file :
<tbody class="text-center">
<tr *ngFor="let agent of agentlist ;let i = index">
<td>{{i + 1 + paginationObject?.page * paginationObject?.itemPerPage}}</td>-->
<td>{{agent?.id?agent?.id:''}}</td>
</tr>
</tbody>
error : <!--bindings={ "ng-reflect-ng-for-of": null }-->
Try removing the --> at the end of the first table cell and correct the binding on the second one.
<tbody class="text-center">
<tr *ngFor="let agent of agentlist ;let i = index">
<td>{{i + 1 + paginationObject?.page * paginationObject?.itemPerPage}}</td>-->
<td>{{agent?.id}}</td>
</tr>
</tbody>
Also, you need to make sure that agentlist has something to iterate. maybe putting a console.log(agentlist) and see what it has inside of it in the ts class. If angelist is only declared but never defined you will get that error. Initialize angelist as an empty array to make sure that have an iterable before defining with the final data.
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 have an array of objects. I have two tables on the screen. I want n-1 elements in top table and the last element to be displayed in bottom column.
HTML top table:
<th>name</th>
<th>age</th>
<tr *ngFor="let key of array">
<td> {{key.name}}</td>
<td> {{key.age}}</td>
HTML bottom table:
<th></th>
<th>age</th>
<tr *ngFor="let key of array">
<td></td>
<td> {{key.age}}</td>
suppose if there are 5 elements, 4 should be displayed at top and last at bottom. In api response I am getting a single array of objects and last object should always be in the bottom table. Also, last table does not have a name column. It returns a string "Final Name". Can this be used to detect that if name === Final Name then remove it from array and show it else where?
What should be the for loop condition for it? Should I slice last element from array and store it in temp array in .ts file?
You could create a variable to store the last array object in your ts file then pop the array to this variable. E.g:
component.ts:
export class YourComponent {
lastItem: YourType;
...
lastItem = myArray.pop();
This will remove the last item and assign it to lastItem variable which can be used to populate your bottom table.
HTML bottom table:
<th></th>
<th>age</th>
<tr>
<td></td>
<td> {{lastItem.age}}</td>
Ok first of all use the *ngFor like this
*ngFor="let item of items; let i = index"
And you can apply condition like
*ngIf="i!=array.length"
And by using index you can print those last array elements separately
If I have to print something like this --
Reason : reason number 1
reason number 2
reason number 3
Code : code number
Remarks : remark
So Reason, Code, and Remarks are headings, and thus I have them in tag, rest of the things such as - reason number 1, reason number 2, code number and remark are the values.
Now, If I use for the heading, the value automatically goes to a new line, What if I want to print them as key-values in a single line. How can I do so.
Preferably without float.
Try like this:
Working Demo
.html
<table border="1">
<ng-container *ngFor="let item of list1;let i = index">
<tr>
<td> {{list1[i]}}</td>
<td *ngIf="list2[i].length > 1">
<li *ngFor="let li of list2[i]">
{{li}}
</li>
</td>
<td *ngIf="list2[i].length <= 1">
{{list2[i]}}
</td>
</tr>
</ng-container>
</table>
.ts
list1 = ["Instructions ", "Reason Code "];
list2 = [["inst 1 ", "inst 2 "], ["Reason code is so and so"]];
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