Угловой компонент не переоценивается при изменении состояния в хранилище NGXS с использованием асинхронного канала - PullRequest
Новая
       22

Угловой компонент не переоценивается при изменении состояния в хранилище NGXS с использованием асинхронного канала

0 голосов
/ 14 февраля 2019

Я немного озадачен тем, почему мой PostListComponent не переоценивает оператор * ngIf, когда состояние моего хранилища изменяется при использовании асинхронного канала.Я использую postFacade для отправки всех моих действий.Это мой шаблон PostListItem: 

`<section *ngIf="!postsFacade.isLoading$ | async else loading">
    <app-post-item 
        class="list-item" 
        *ngFor="let post of postsFacade.posts$.posts | async; index as i" 
        [post]="post"
        [index]="i">        
        <img [routerLink]="['movies', i]" class="movie-card-image" src="../../../../../../../assets/images/movie_img_placeholder.jpg" alt="Movie Placeholder Image"
        (click)="moviesFacade.fetchMovieDetails(i);">
    </app-post-item>       
</section>

<ng-template #loading>
    <app-loader></app-loader>
<ng-template>`

Когда выборка сообщений и сервер находится в режиме ожидания, загрузочный счетчик отображается правильно, однако, когда все сообщения извлекаются, он не исчезает, указывая, что асинхронный каналне переоценивает свойство isLoading $.

Мой HomeComponent для ngOnInit => this.postsFacade.loadPosts.Мой PostsFacade выглядит следующим образом: `

export class PostsFacadeService {
  public posts$: Observable<Post[]> = this.store.select(state => state.posts.posts)
  public isLoading$: Observable<boolean> = this.store.select(state => 
  state.posts.loading);
  constructor(private store: Store) {  }

  public loadPosts(): void{
    console.log("Dispatching FetchPosts from PostsFacadeService");      
    this.store.dispatch(new actionTypes.FetchPosts());
  }

}

`

А в NGXS вот мое действие fetchPosts 

`
    @Action(actions.FetchPosts)
    fetchAll(ctx: StateContext<PostStateModel>){
      console.log("fetching all posts");
      ctx.patchState({...ctx.getState(), loading: true})
        return this.postService.fetchPosts().pipe(
        switchMap((postsRequest) => {
          // we are using switchMap in this case, because we want to subscribe to the current observable and unsubscribe from it if another request is coming in to get all posts
          console.log("Inside of switchMap. Dispatching posts success")
          return ctx.dispatch(new actions.FetchPostsSuccess(postsRequest))
        }),
        retryWhen(errors => {
          return errors
                  .pipe(
                    delayWhen((error, i) => 
                    {
                      if(i != 3){
                        console.log(`Sometheing went wrong connecting to the server. Retrying 3 times. Attempting: ${i + 1}...`);
                      }
                      return iif(() => i + 1 >= 4,
                       throwError(error),
                       timer(2000)
                      )
                    })                    
                  );
        }),
        catchError(err => 
        {
          // Return user friendly error message
          console.log("Displaying user friendly error message", err)
          ctx.dispatch(new actions.FetchPostsFail(err))
          return throwError(err);
        }),
        catchError(err => {
          console.log("An error occured. Returning empty collection");
          return of([]);
        })
        )
        .subscribe(
          res => console.log("HTTP response", res),
          err => console.log("HTTP Error", err),
          () => console.log('HTTP request completed')
        )
    };
`

Что мне не хватает, хотя консоль показываетДля свойства загрузки должно быть установлено значение false (что делается в действии FetchPostsSuccess), мой PostListsComponent все еще думает о своих сообщениях о загрузке.Любая помощь приветствуется!

...