[英]How to refresh a part of the page view without refreshing the entire page in angular on a click event?
[英]How to refresh data from view without refreshing the whole page? angular
我是 Angular 4 的新手,我正在尝试制作一个可以显示用户日志的网站。 我的问题是如何从数据库中获取新数据并将其显示到我的角度页面而不刷新页面。 我的朋友告诉我使用 ajax,是否有任何内置的角度解决方案可以解决我的问题? 这是我的服务代码
import { Injectable } from '@angular/core';
import {Http,Headers} from '@angular/http';
import * as _ from 'underscore';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/toPromise';
import {tokenNotExpired} from 'angular2-jwt';
@Injectable()
export class PagerService {
authToken:any;
constructor(private http:Http) { }
getzip(){
//gets all the data that matches the users zipcode
var headers = new Headers();
this.loadToken();//access token
headers.append('Authorization',this.authToken);
headers.append('Content-type','application/json');
return this.http.get('http://localhost:3000/logs/getByName',{headers:headers})
.toPromise().then((res) => res.json());
}
loadToken(){
var token = localStorage.getItem('id_token');
this.authToken = token;
//this.user = user;
}
getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
// calculate total pages
let totalPages = Math.ceil(totalItems / pageSize);
let startPage: number, endPage: number;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
} else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
let startIndex = (currentPage - 1) * pageSize;
let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
// create an array of pages to ng-repeat in the pager control
let pages = _.range(startPage, endPage + 1);
// return object with all pager properties required by the view
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
}
这是我的 component.ts
import { Component, OnInit } from '@angular/core';
import {PagerService} from '../../service/pager.service';
import {Router} from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import * as _ from 'underscore';
@Component({
selector: 'app-messages',
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
constructor(private pagerService:PagerService,
private router:Router,
private http:Http
) { }
doc:any[];
// array of all items to be paged
private allItems: any[];
// pager object
pager: any = {};
// paged items
pagedItems: any[];
row:any;
ngOnInit() {
this.pagerService.getzip().then(data =>{
this.allItems = data;this.setPage(1);
console.log(JSON.stringify(this.allItems.length),"MESSAGES")
},err=>{console.log(err); return false;});
}
setPage(page: number) {
if (page < 1 || page > this.pager.totalPages) {
return;
}
// get pager object from service
this.pager = this.pagerService.getPager(this.allItems.length, page);
// get current page of items
this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
console.log(this.pager.startIndex,this.pager.endIndex)
}
}
这是我的观点:
<div *ngIf="allItems && allItems.length <= 0" class="alert alert-dismissible alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> There no currently <a href="#" class="alert-link">messages to display</a>.
</div>
<div *ngIf="allItems && allItems.length > 0">
<table class="table table-striped table-hover ">
<thead>
<tr>
<th></th>
<th>Plate Number</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
</tr>
</thead>
<tbody >
<tr *ngFor ="let x of pagedItems;let i = index">
<td>{{i+(pager.startIndex+1)}}</td>
<td>{{x.platenumber}}</td>
<td>{{x.date.month}}-{{x.date.dayN}}-{{x.date.year}}</td>
<td>{{x.time}}</td>
<td>{{x.location.street}}</td>
</tr>
</tbody>
</table>
</div>
<div class = "text-center">
<!-- pager -->
<ul *ngIf="pager.pages && pager.pages.length" class="pagination">
<li [ngClass]="{disabled:pager.currentPage === 1}">
<a (click)="setPage(1)">First</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === 1}">
<a (click)="setPage(pager.currentPage - 1)">Previous</a>
</li>
<li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
<a (click)="setPage(page)">{{page}}</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
<a (click)="setPage(pager.currentPage + 1)">Next</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
<a (click)="setPage(pager.totalPages)">Last</a>
</li>
</ul>
</div>
在理想情况下,服务器端应设置一个推送通知方法,以告知客户端新数据可用。
如果不可用,则可以使用setInterval()
更新allItems
变量,该变量包含从服务返回的所有数据。 我建议您在component.ts中进行以下调整:
dataRefresher: any;
ngOnInit() {
this.getData(true);
this.refreshData();
}
getData(setPageFlag){
this.pagerService.getzip().then(data =>{
this.allItems = data;
if(setPageFlag){
this.setPage(1);
}
console.log(JSON.stringify(this.allItems.length),"MESSAGES")
},
err => { console.log(err); return false;});
}
refreshData(){
this.dataRefresher =
setInterval(() => {
this.getData(false);
//Passing the false flag would prevent page reset to 1 and hinder user interaction
}, 30000);
}
刷新时间设置为30s,将其更改为对您有利的任何时间:)
您还可以添加一个函数来清除间隔并在ngOnDestroy
上调用它:
cancelPageRefresh(){
if(this.dataRefresher){
clearInterval(this.dataRefresher);
}
}
ngOnDestroy(){
this.cancelPageRefresh();
}
如果您使用的是OnDestroy
,请不要忘记将其import
并添加到类implementation
在我的例子中,要刷新数据而不用角度刷新 html 数据表中的整个页面。 我刚刚在 Angular 的生命周期挂钩 AfterViewChecked 之一中重新分配它,就是这样,我在数据表中获取了新数据。 组件.ts
ngAfterViewChecked(): void {
this.lstorage = JSON.parse(localStorage.getItem('employee')!);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.