Angular - автоматическое обновление данных без обновления страницы - PullRequest
Новая
       36

Angular - автоматическое обновление данных без обновления страницы

2 голосов
/ 04 ноября 2019

В моем приложении есть таблица, которая получает строки из базы данных.

Это AJAX CALL (SERVICE) 

getPosts(): Observable<Posts[]> {
    return this.http.post<Posts[]>(this.myAppUrl + this.myApiPostsUrl, this.authService.getLoggedUserFromSessionStorage())
      .pipe(
        retry(1),
        catchError(this.errorHandler)
      );
  }

Все работает отлично, номои данные не обновляются автоматически, и пользователь должен обновить страницу, чтобы увидеть новые строки, как я могу это сделать? Я хотел бы сделать, чтобы новые строки добавлялись в таблицу динамически ... без обновления страницы. Это таблица

КОМПОНЕНТ HTML 

    <table *ngIf="(posts$ | async)?.length>0" class="table align-items-center table-flush">
    .....
 <tr *ngFor="let post of (posts$ | async) | filter:authService.filter | paginate: config | orderBy: key : reverse">
              <!--              <td>{{posts.id}}</td>-->
              <td>{{post.title}}</td>
              <td>{{post.body}}</td>
.....
    </table>

КОМПОНЕНТ TS 

ngOnInit() {
    this.loadPosts();
  }

  loadPosts() {
    this.message = 'Loading....';
    this.posts$ = this.postService.getPosts();
    if (this.posts$ == null) {
      this.message = 'No Posts found';
    }
  }

Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 04 ноября 2019

Есть несколько вариантов. Вот реактивный способ справиться с этим. В любое время, когда getPosts будет успешным, вам нужно будет повторно получить исходные данные.

Чтобы получить исходные данные, вам нужно будет обернуть свои posts$ наблюдаемые в поток действий: 

// create a stream for your post request
private readonly postAction$ = new Subject();

posts$ = this.postAction$.pipe(
  startWith(''),
  concatMap(()=> {
    return this.postService.getPosts(); // this will be your http get request
  }),
)

Оператор startWith заставит ваш запрос get первоначально сработать без того, чтобы наблюдаемое было передано вашей наблюдаемой postAction.

Ваш метод getPosts теперь будет вызывать this.postAction$.next() в случае успеха, что вызовет повторное получение вашей posts$ наблюдаемой. 

getPosts(): Observable<Posts[]> {
    return this.http.post<Posts[]>(this.myAppUrl + this.myApiPostsUrl, this.authService.getLoggedUserFromSessionStorage())
      .pipe(
        retry(1),
        catchError(this.errorHandler),
        tap(() => this.postAction$.next())
      );
  }

Вы можете увидеть демо из этого. Проверьте консоль, вы увидите, что запрос get запускается при каждом нажатии кнопки.

С интервалом 

posts$ = interval(30000)
    .pipe(
      startWith(''),
      switchMap(() => return this.postService.getPosts();)
    )

Интервал демо

0 голосов
/ 04 ноября 2019

в Angular, когда вы хотите обновить html, вам нужно использовать ngFor для автоматического обновления ваших данных. 

<table *ngIf="(posts$ | async)?.length>0" class="table align-items-center table-flush">
   <div *ngFor="let data of datas; let i = index>
      {{ data }}
   </div>
</table>

ngFor будет зацикливаться на данных и обновлять их при изменении

...