When showing the data in a table using Angular, the data is not refreshing. The issue only related to Safari. On resizing the screen then the table is getting refreshed and data is populated again.
Issue is not present on Chrome, Opera or Firefox
*****rentals-dashboard.component.ts*****
getRentalList(per_page= 0, limit= 25) {
this.is_messaging = false;
let year = this.year_for_list;
this.all = true; this.active = false; this.completed = false; this.canceled = false; this.rejected = false; this.archive = false;
if (this.renter_dashboard == true) {
this.dashboard.getRentalList(this.token, year, per_page, limit)
.subscribe((res: any) => {
console.log('Renter list...');
// console.log(res);
let response = res.json();
console.log(response);
this.rental_data = response.result.order_list;
this.rental_year_array = response.result.date_array;
this.totalItemsRental = response.result.pagination.total_rows;
});
} else {
this.dashboard.getRentalListForOwner(this.token, year, per_page, limit)
.subscribe((res: any) => {
console.log('Owner list...');
console.log(res.json());
let response = res.json();
this.rental_data = response.result.order_list;
this.rental_year_array = response.result.date_array;
this.totalItemsRental = response.result.pagination.total_rows;
console.log('Total rows..');
console.log(this.totalItemsRental);
});
}
}
*****rentals-dashboard.component.html*****
<div class="row hidden-xs" *ngIf="!is_messaging">
<div class="table-responsive points_table">
<table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-hover">
<thead class="new_panel">
<tr>
<th>Order Number</th>
<th *ngIf="owner_dashboard">Renter Name</th>
<th *ngIf="renter_dashboard">Owner Name</th>
<th>Project Name</th>
<th>Payment Status</th>
<th>Order Status</th>
<th>Cost</th>
<th>Pickup Date</th>
<th>Return Date</th>
<!-- <th>Total Paid</th> -->
<th></th>
</tr>
</thead>
<tbody class="new_panel1">
<tr *ngFor="let item of rental_data">
<td *ngIf="renter_dashboard"><a [routerLink]="[ '/order-summary', item.order_id, 'renter' ]">{{item.order_id}}</a></td>
<td *ngIf="owner_dashboard"><a [routerLink]="[ '/order-summary', item.order_id, 'owner' ]">{{item.order_id}}</a></td>
<td>{{item.app_user_first_name}} {{item.app_user_last_name}}</td>
<td>{{item.project_name}}</td>
<td>{{item.payment_status}}</td>
<td>{{item.order_status}}</td>
<td>{{item.total_rent_amount | currency}}</td>
<td>
<div class="">
<!-- 01<span>sep</span> -->
{{item.gear_rent_start_date | date}}
</div>
</td>
<td>
<div class="">
<!-- 01<span>oct</span> -->
{{item.gear_rent_end_date | date}}
</div>
</td>
<!-- <td>${{item.total_rent_amount}}</td> -->
<td>
<a href="javascript:void(0);" aria-haspopup="true" aria-expanded="false" role="button" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"
aria-hidden="true"></span></a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<!-- <li class="active"><a href="#">In progress</a></li> -->
<li><a href="javascript:void(0);" (click)="messageWith(item.renter_id, item.user_gear_desc_id, item.app_user_first_name, item.user_profile_picture_link, item.order_id, item.project_name)">Messages</a></li>
<!-- <li><a href="#">Kit listing</a></li> -->
<!-- Client told to hide this for now on task list 6 -->
<!-- <li><a href="#">Delivery information</a></li> -->
<!-- <li><a target="_blank" href="{{item.user_profile_picture_link}}">Invoices</a></li> -->
<li *ngIf="renter_dashboard && item.payment_status == 'Contract'"><a (click)="seeInvoice(item.user_gear_desc_id)" href="javascript://;">Tax Invoice</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<ng-container>
<pagination [totalItems]="totalItemsRental" [itemsPerPage]="limitRental" [(ngModel)]="currentPageRental" (pageChanged)="pageChangedRental($event)"></pagination>
</ng-container>
</div>
</div>
Thanks beforehand.
