使用Angular在表中显示数据时，数据不会刷新。该问题仅与Safari有关。调整屏幕大小后，将刷新表，并再次填充数据。
Chrome，Opera或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>
谢谢。