I have a problem to display data array in table.
I have component.html
<div class="row">
<table class="bordered table-bordered" [mfData]="hbps| dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead>
<tr>
<th>
<mfDefaultSorter by="serial_number">Serial Number</mfDefaultSorter>
</th>
<th>
<mfDefaultSorter by="sensor_serial">Sensor Serial</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mf.data">
<td>{{item.serial_number}}</td>
<ul><li>{{item.sensors[0].sensor_serial}}</li></ul>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot> </table> </div>
component.ts
> public hbps: HBPS[];
>
> ngOnInit() {
> this.ws.hbpsGetAll().subscribe(
> hbps=> {
> this.hbps= hbps;
> }
> );
> }
ws send me this data
{"StatusCode":0,"StatusMessage":"OK","StatusDescription": [{"homeboxpackage_id":"1","active":0,"homebox_id":"11","serial_number":"serialn1","user_id":"31",
"sensors":{ "0":{"sensor_serial":"sensorserial1",
"sensors_id":"11E805BA6732C3DB"},
"1":{"sensor_serial":"sensorserial2",
"sensors_id":"11E805BA6F1E6CE9"},
"2":{"sensor_serial":"sensorserial3",
"sensors_id":"11E805BA7716C775"}}}]
And, my object sensors: string[]
Can you help me to display all array sensors in cell of the table.
Related
I am trying to print key in center of values.so that I tried to use rowspan but it's repeating n times.
here is my code
<table >
<tbody ng-repeat="(key,value) in values1" >
<tr >
<th translate> Heading 1</th>
<th translate> Heading 2 </th>
<th translate> Heading 3 </th>
<th translate> Heading 4 </th>
</tr>
<tr ng-repeat="itr in value">
<td >
{{itr .value1}}
</td>
<td >
{{itr .value2}}
</td>
<td >
{{itr .value3}}
</td>
<td rowspan="{{value.length+1}}" >
{{key}}
</td>
</tr>
</tbody>
</table>
But I am getting like this.
I need in this format
I've got a table that I need three different links to show up on the specific row that the mouse is hovering over. The links are "View", "Edit", and "Trigger Now".
I need this event to happen only on the sessions table.
Here's my current HTML:
<div>
<h1>Manage Workflows</h1>
</div>
<div class="tablez">
<table class="table table-hover" id = "groups">
<thead>
<tr>
<th scope="col">Groups</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let row of rows" (click) = "onRowClick(row.id)">
<td class="data">{{row.group}}</td>
</tr>
</tbody>
</table>
<table class="table" id = "sessions">
<thead>
<tr>
<th scope="col">Sessions</th>
<th scope="col" id = "trigger">Next Trigger</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let row of tableTwo">
<td scope="row">{{row.session}}</td>
<td scope="row" id = "trigger" >{{row.nextTrigger}}</td>
</tr>
</tbody>
</table>
</div>
You can use mouseover event of the angular
<tr *ngFor = "let row of tableTwo" (mouseover)="showLinks=true" (mouseout)="showLinks=false" >
<td scope="row">{{row.session}}</td>
<td scope="row" id = "trigger" >{{row.nextTrigger}} </td>
<td *ngIf="!showLinks" scope="row"> View Edit Trigger Now links </td>
</tr>
I'm using Angular and want to get index of rows inside the table when user clicks.When I try to get,it returns always 0.Because I have just one tr inside tbody but even I cange with $('table td') still getting same index.What should I change?
Table in HTML
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Student Number</th>
<th>Department</th>
<th>Photo</th>
</tr>
</thead>
<tbody *ngFor="let studentsEl of items2">
<tr>
<td>{{studentsEl.name}}</td>
<td>{{studentsEl.age}}</td>
<td>{{studentsEl.stuNumber}}</td>
<td>{{studentsEl.department}}</td>
<td>
<img
[src]="studentsEl.imagePath"
alt="{{ studentsEl.name }}"
class="img-responsive"
style="max-height: 75px;">
</td>
</tr>
</tbody>
</table>
Typescript file of the component
constructor() {
$(document).ready( function() {
$('table tr').click( function() {
alert($(this).index());
});
});
Here you have a couple of issues:
use ngFor for table row
You shouldn't use dosument.ready in constructor, but create a method and click handler.
Here is HTML:
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Student Number</th>
<th>Department</th>
<th>Photo</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let studentsEl of items2; let idx = index">
<td>
<span (click)="getIndex(idx)">
{{studentsEl.name}} yourIndex: {{ idx }}
</span>
</td>
<td>{{studentsEl.age}}</td>
<td>{{studentsEl.stuNumber}}</td>
<td>{{studentsEl.department}}</td>
<td>
<img
[src]="studentsEl.imagePath"
alt="{{ studentsEl.name }}"
class="img-responsive"
style="max-height: 75px;">
</td>
</tr>
</tbody>
</table>
Your typescript file:
getIndex(idx){
console.log(idx);
}
I am currently working on the update table row. I have a table with list of rows
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><a (click)="editPopUp()">Edit</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><a (click)="editPopUp()">Edit</a></td>
</tr>
</tbody>
</table>
On Edit click a modal will popup that contains table to edit the selected row. This editPopUp function shows up the modal.
ts
editPopUp(){
this.modalOn = true;
}
modal
<app-dialog
[showDialog]="modalOn"
[titleText]="modalTitle"
[hideNegative]="true"
[hidePositive]="true"
(closeButtonClicked)="this.resetModal()"
[level]="1"
>
<form
[formGroup]="maintenanceProductTargetForm" *ngIf="maintenanceProductTargetForm"
(ngSubmit)="editMaintenanceProduct(maintenanceProductTargetForm.value)"
>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><input type="text" formControlName="first_name" name="first_name"></td>
<td><input type="text" formControlName="last_name" name="last_name"></td>
<td><a (click)="update()">Edit</a></td>
</tr>
</tbody>
</table>
</form>
</app-dialog>
I am not sure how to pass this row data to this popup?
Any Help please
<!--TableDataComponent.html-->
<table>
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr *ngFor = "let data of dataList">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td><button (click) = "editPopUpmodal(data)">Edit</button></td>
</tr>
</table>
<!--Modal Pop Up -->
<div *ngIf="showModalPopUp">
<input type="text" [(ngModel)] = "editData.id" />
<input type = "text" [(ngModel)] = "editData.name" />
<button (click) = "updateData(editData)" > Update </button>
</div>
Imagine above is your code for table and pop-up (Kindly ignore that there is nothing specific to Modal, I just took an element to show as modal) which are in same component.html
//TypeScript
editData:any = {};
showModalPopUp : boolean = false;
//Constructor, ngOnInit and so on will come
editPopUpmodal = (data) => {
this.showModalPopUp = true;
this.editData = Object.assign(data);
}
updateData = (updatedData) => {
//Call the API through the data service to update the object
}
I need something like this:
<tr>
somecode...
</tr *ngIf="some condition">
which of course isn't supported, but is there any way to achieve this behavior?
I have a table, and I want to add rows to it recursively using a component that receives node's list(List), iterates over the nodes, print them and calls itself for each of the children of each node roughly like this:
main.component.html
<table class="table table-bordered">
<thead>
<tr>
<th>node names</th>
</tr>
</thead>
<tbody>
<tr app-rower [nodes]="nodes"></tr>
</tbody>
</table>
rower.component.html:
<ng-container *ngFor="let node of tree">
<tr>
<td>
{{node.name}}
</td>
</tr *ngIf="node.hasChildren">
<tr *ngIf="node.hasChildren" app-rower [tree]="node.children" >
</tr *ngIf="!node.hasChildren">
</ng-container>
so a final html would be:
<table>
<thead>
<tr>
<th>node's names</th>
</tr>
</thead>
<tbody>
<tr>
<td>node 1</td>
</tr>
<tr>
<td>node 1's child</td>
</tr>
<tr>
<td>node 1's grandchild</td>
</tr>
<tr>
<td>node 2</td>
</tr>
<tr>
<td>node 2's child</td>
</tr>
</tbody>
</table>
No, that's not supported. A template needs to be valid HTML otherwise Angular won't parse it.
<ng-container *ngFor="let node of tree">
<tr>
<td>
{{node.name}}
</td>
</tr>
<tr *ngIf="node.hasChildren" app-rower [tree]="node.children" >
</tr>
</ng-container>