Question

对于使用异步管道的存储状态发生更改时，为什么我的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 $属性。

我在ngOnInit上的HomeComponent => this.postsFacade.loadPosts。我的帖子外观看起来像这样 `

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')
        )
    };
`

我遗漏了什么，即使控制台显示将loading属性设置回false（在FetchPostsSuccess操作内部完成），我的PostListsComponent仍在考虑其加载帖子。任何帮助表示赞赏！

使用异步管道在NGXS存储中的状态更改时，Angular组件不会重新评估

0 个答案: