ページ全体を更新せずにビューからデータを更新するにはどうすればよいですか？角度

Question

角度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">&times;</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> 

Answer 1

、そこにする必要があります新しいデータが利用可能であることをクライアントに通知する、サーバー側によるプッシュ通知メソッドの設定。

これが利用できない場合はsetInterval()を使用して、allItems変数を更新できます。これはsericeから返されたすべてのデータを保持します。私はあなたの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); 
} 

更新時間が30代に設定されている、あなたのために良いです何にそれを変更する:)

あなたはまた、間隔、コールをクリアする機能を追加することができますそれngOnDestroy上：

cancelPageRefresh(){ 
    if(this.dataRefresher){ 
     clearInterval(this.dataRefresher); 
    }  
} 

ngOnDestroy(){ 
    this.cancelPageRefresh(); 
} 

あなたがOnDestroyを使用している場合は、importにそれを忘れてはいけないと、クラスimplementation