Question

我有一个Angular 7应用程序，正在使用ngrx。当我向商店中添加文件对象时，我在redux检查器中看到了更改，但是每当我转到显示文件的路径时，直到重新加载浏览器，我都不会得到最近添加的文件。我一直在试图找出造成这种情况的原因，但到目前为止还没有。

减速器：

case FilesActionTypes.GET_FILES:
    return { ...state, loading: true };
case FilesActionTypes.GET_FILES_SUCCESS:
    return adapter.addAll(action.payload.data, state);
case FilesActionTypes.UPLOAD_FILE_SUCCESS:
      return adapter.addOne(action.payload.file, { ...state, loading: false });

我只是使用默认的selectAll选择器。选择器：

export const selectAllFiles = createSelector(selectFilesState, selectAll);

这是我显示文件的组件：

export class UserComponent implements OnInit {
  public id: string;
  public files$: Observable<any>;
  public user$: Observable<any>;

  constructor(private route: ActivatedRoute,
              private filesStore: Store<FilesState>,
              private usersStore: Store<UsersState>) {}

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
    this.files$ = this.filesStore.select(selectAllFiles);
    this.user$ = this.usersStore.select(selectCurrentUser);
    this.usersStore.dispatch(new GetUserAction({ id: this.id, params: null }));
    this.filesStore.dispatch(new GetFilesAction({ query: { entityId: this.id, entityService: 'users' }}));
  }

}

和我的模板：

 <ng-template ngbTabContent>
      <div *ngFor="let file of files$ | async">
        <a [href]="['http://localhost:3030/files/'] + file._id" target="_blank">{{ file.name }}</a>
       </div>
 </ng-template>

如果您需要更多代码，我可以提供。预先感谢。

编辑：我将问题缩小了一点。

我有一个/ users路由和/ users /：id路由。如果我添加文件（从/ users路由）而不先转到/ users /：id路由，那么导航到/ users /：id路由时可以看到文件的更新列表。但是，如果我转到/ users /：id路由并返回/ users并添加文件，然后再次转到/ users /：id，则直到重新加载页面后，我才能看到文件的更新列表。

也许这可以帮助您。

Answer 1

我认为您错过了括号 <div *ngFor="let file of (files$ | async)">
但是，您可以在执行ngfor

之前检查数据是否存在

 <ng-template ngbTabContent *ngIf="files$ | async as files">
   <div *ngFor="let file of files">
    <a [href]="['http://localhost:3030/files/'] + file._id" target="_blank">{{ file.name }}</a>
   </div>
 </ng-template>

Answer 2

问题似乎出在后端。

问题已解决。祝你有美好的一天！

在重新加载页面之前，ngrx存储不会在其他路由上更新

2 个答案: