I'm building a dynamic table using angular2 using *ngFor as below, but I'm not able to see data. I'm not sure {{x[col]}} is correct, any idea?
<tr *ngFor="let x of exportList">
<td *ngFor="let col of cols">
{{x[col]}}
</td>
</tr>
You need to traverse each row in the inner loop.
Try:
<tr *ngFor="let rows of exportList">
<td *ngFor="let col of rows">
{{col}}
</td>
</tr>
<tr *ngFor="let x of exportList">
<td *ngFor="let col of x">
{{col}}
</td>
</tr>
you simply need to replace cols with x. exportList contains numbers of object.so in x you will get one object in each loop.By using object,you can fetch each field.
Related
I am trying to drag column of a row to another row but it can't drop to another row's column array. I have following type of array ( sample data array ).
[
{ // row
key: value,
cols: [{ key: value }] // cols array
},
//n numers of row
]
My code.
<table id="id">
<tbody sortablejs ngDefaultControl [(ngModel)]="Array">
<tr *ngFor="let item of Array; let i = index">
<td class="myRowClass sort-disabled">
<!-- index logic -->
</td>
<td class="myRowClass sort-disabled">
<!--logic -->
</td>
<td sortablejs>
<div *ngFor="let cell of item.cols" class="divSize">
<!-- column logic -->
</div>
</td>
</tr>
</tbody>
</table>
By using [sortablejsOptions]="options" i achieved my functionality.
<table id="id">
<tbody [sortablejs]="Array" [sortablejsOptions]="Array">
<tr *ngFor="let item of Array">
<td class="myRowClass sort-disabled">
<!-- index logic -->
</td>
<td>
<!--row logic -->
</td>
<td [sortablejs]="item.cols" [sortablejsOptions]="options">
<div *ngFor="let cell of item.cols; let j = index">
<!--column logic -->
</div>
</td>
</tr>
</tbody>
</table>
options in .ts file group name must be same.
options: Options = {
group: { name: "test" }
}
Our angular 2 application has a html table, that displays data from the database. Now we need to make few items editable in the table. I have made the needed items editable and added the button update, when clicked on the update button I need to get the edited value of the row along with the id of the row.
Please help me how to achieve it. Given below is my code.
<tr *ngFor="let row of tableData;">
<td >{{ row.id}}</td>
<td contenteditable="true">{{ row.editableData1 }}</td>
<td contenteditable="true">{{ row.editableData2}}</td>
<td style="color: black;">{{ row.user }}</td>
<td class="link">
<button (click)="updatetoDB()" type="button"> Update </button>
</td>
</tr>
So When user clicks on the Update Button, I need to get the edited data and the id of the row. Thank you in Advance :)
#data1 method maybe not work because td element does not have value attribute.
Can you try to add an input element into your td like this :
<tr *ngFor="let row of tableData;">
<td >{{ row.id}}</td>
<td contenteditable="true"><input type="text" [value]="row.editableData1" #data1/></td>
<td contenteditable="true"><input type="text" [value]="row.editableData2" #data2/></td>
<td style="color: black;">{{ row.user }}</td>
<td class="link">
<button (click)="updatetoDB(data1, data2, row.id)" type="button">Update</button>
</td>
</tr>
I think it should be working, but you habe to include an input element into your td.
It's annoying ?
Hi,
The best solution is to use reactive form.
But i think you can name the edited data and pass it to your fonction updateToDB like this :
<tr *ngFor="let row of tableData;">
<td >{{ row.id}}</td>
<td contenteditable="true" #data1>{{ row.editableData1 }}</td>
<td contenteditable="true" #data2>{{ row.editableData2}}</td>
<td style="color: black;">{{ row.user }}</td>
<td class="link">
<button (click)="updatetoDB(data1, data2, row.id)" type="button"> Update </button>
</td>
</tr>
Log the content of data1 ans data2 variables, i think tour data should be in data1.value ans data2.value.
Hope that help you.
How to get first td value of tr on click condition.If i click the first td i want to get the value in angular 7.Please do not write any inline code for tr. We need to Use only by coding like find table inside .How we can do it using p-table id="dt" by viedchild or element reference?
Demo: https://stackblitz.com/edit/p-table-primeng-v6-t1k6ng?file=src/app/app.component.html
app.component.ts:
#ViewChild('dt') public dataTable: DataTable;
app.component.html:
<p-table id="dt" [columns]="cols" [value]="cars" [scrollable]="true" [rows]="10" [virtualRowHeight]="30" [loading]="loading"
[virtualScroll]="true" (onLazyLoad)="loadCarsLazy($event)" [lazy]="true" [totalRecords]="totalRecords">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of cols">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr style="height:30px">
<td *ngFor="let col of cols">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
Note:
please do not write like this inline code: Do it by typescript or javascript.
<ng-container *ngFor="let col of cols; let i = index;">
<td (click)="handleClick(i)">
{{rowData[col.field]}}
</td>
</ng-container>
primeng table has already a selection feature that just need to set the selection mode and property to bind the selected item
<p-table selectionMode="single" [(selection)]="selectedCar">
....
</p-table>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of cols">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr style="height:30px" [pSelectableRow]="rowData">
<td *ngFor="let col of cols">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
this how you set the selected item on clikc and will be boound to the
selected property that has defined by [(selection)]='...' not this
[pSelectableRow]="rowData" will set the holde item as selected but
you can set the selected item to just the first colume data of the tr
like this [pSelectableRow]="rowData['vin']"
demo ⚡
check 👉 this for other selection cases like has a checkbox or button
I need to create a table based in two loops. I have tried the following:
<tbody *ngIf="testCases">
<tr class="pointer" *ngFor="let car of cars; let bike of bikes">
<td class="center">{{car?.id}}</td>
<td class="center">{{bike?.id}}</td>
</tr>
</tbody>
I know the I get the data because I have tried it in typescript with console.log but when I display it in HTML I print null for bike
You can use <ng-container>. It is a helper element that allows to use *ngFor, *ngIf, or other structural directives but doesn't actually create HTML content.
<ng-container *ngFor="let car of cars">
<tr class="pointer" *ngFor="let bike of bikes">
<td>{{car.id}} {{bike.id}}</td>
</tr>
</ng-container>
If both have same no of records , you can do it like
<tr class="pointer" *ngFor="let car of cars; let i = index;">
<td class="center">{{cars[i]?.id}}</td> // or <td class="center">{{car?.id}}</td>
<td class="center">{{bikes[i]?.id}}</td>
</tr>
In your typescript code you can do this:
vehicles = (<any[]>cars).concat(<any>[bikes]);
And then in your view you can bind it easily like:
<tr class="pointer" *ngFor="let vehicle of vehicles">
<td *ngIf="vehicle.vehicleType === 'car'" class="center">{{vehicle.id}} is car</td>
<td *ngIf="vehicle.vehicleType === 'bike'" class="center">{{vehicle.id}} is bike</td>
</tr>
You cannot use on the same line, try it as separate rows
<tbody *ngIf="testCases">
<tr class="pointer" *ngFor="let car of cars ">
<td class="center">{{car?.id}}</td>
</tr>
<tr class="pointer" *ngFor="let bike of bikes">
<td class="center">{{bike?.id}}</td>
</tr>
</tbody>
EDIT
if you want on the same row use index which will hold the array value
<tr class="pointer" *ngFor="let car of cars; let x = index;">
<td class="center">{{cars[x]?.id}}</td>
<td class="center">{{bikes[x]?.id}}</td>
</tr>
This is the extended question of AngularJS Multiple ng-repeats on single row of table
I'm trying to display a grandChilds collection. A for loop would look something like this.
foreach(var parent in list)
foreach (var child in parent)
foreach (var grandChild in child)
print(grandChild.item1)
print(grandChild.item2)
print(grandChild.item3)
Below is the general idea of what each row would look like.
<table>
<tr ng-repeat="parent in list">
ng-repeat="child in parent"
ng-repeat="grandChild in child"
<td>grandChild.item1</td>
<td>grandChild.item2</td>
<td>grandChild.item3</td>
</tr>
</table>
In the above referred question, TBODY is a good idea. But it will satisfy only two level (i.e., Parent and Child). How could I achieve my requirement (Parent, Child, Grandchild). Kindly assist me.
If I use nested TBODY, then its failed in the W3C Validation.
Kindly assist me how to achieve this
Use new table for each parent.
<table ng-repeat="parent in list">
<tbody>
<tr ng-repeat="child in parent">
<td ng-repeat="grandchild in child"></td>
</tr>
</tbody></table>
You could show a table(or other elements such as span\div) for grandchild collection within the table for list
<table>
<tr ng-repeat="parent in list">
<td ng-repeat="child in parent">
<table>
<tr ng-repeat="grandChild in child">
<td ng-repeat="item in grandChild">
{{item}}
<td>
</tr>
</table>
</td>
</tr></table>
EDIT: I have replaced it with div element. You can work on how to order the data in the display.
<table>
<tr ng-repeat="parent in list">
<td ng-repeat="child in parent">
<div ng-repeat="grandChild in child">
<div ng-repeat="item in grandChild">
{{item}}
</div>
</div>
</td>
</tr></table>