Angular Akita 仅设置数组中的最后一个值

Question

我是秋田州管理层的 Angular 新手。我正在尝试将值数组设置为实体状态。但由于某种原因，只有数组中的最后一项被设置。但值的数量是正确的。 IE。我的数组中有 14 个不同的项目。但在秋田，最后一个值设置为 14 次。不知道我在这里做错了什么。有人可以帮忙吗？

export interface UserTagState extends EntityState<string, string> {
  areTagsLoaded: boolean;
}

const initialState = {
  areTagsLoaded: false
};

@Injectable({
  providedIn: 'root'
})
@StoreConfig({ name: 'usertags' })
export class UserTagStore extends EntityStore<UserTagState> {
  constructor() {
    super(initialState);
  }
}

立面：

@Injectable({
  providedIn: 'root'
})
export class UserTagFacade {
  tags$ = this.query.tagsAreLoaded$
    .pipe(
      filter(areTagsLoaded => !areTagsLoaded),
      exhaustMap(areTagsLoaded => {
        if (!areTagsLoaded) {
          this.loadTags();
        }

        return this.query.tags$;
      }),
      shareReplay(1)
    );

  constructor(
    private readonly store: UserTagStore,
    private readonly query: UserTagQuery,
    private readonly api: UserTagDataService
  ) { }

  loadTags() {
    this.store.setLoading(true);
    this.api
      .getTags()
      .pipe(take(1))
      .subscribe((tags) => {
        this.store.setLoading(false);
        this.store.set(tags); // up until here the tags array shows the correct value
        this.store.update(state => ({
          ...state,
          areTagsLoaded: true
        }));
      });
  }
}

查询：

@Injectable({
  providedIn: 'root'
})
export class UserTagQuery extends QueryEntity<UserTagState> {
  tags$ = this.selectAll();

  tagsAreLoaded$ = this.select(state => {
    return state.areTagsLoaded;
  });

  constructor(protected store: UserTagStore) {
    super(store);
  }
}

输出：

Tags: [ "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics" ]

谢谢

Answer 1

对我来说，我试图实现 Akita 服务器端分页。我错误地认为 EntityState 中的 ID 没什么大不了的。这是一件非常重要、非常必要的事情；它将假定 ID 位于键

id

中，除非您在

@StoreConfig

中另外指定。

我的

id

对象中没有

EntityState

字段，它表现为将整个数据数组作为最后一个元素复制。因为服务器响应不包含每个对象的

id

，所以我为每个对象生成了客户端 10 位随机 ID。

Answer 2

在loadTags()中，删除下面的部分并再次运行。谢谢。

this.store.update(state => ({
    ...state,
    areTagsLoaded: true
}));

Answer 3

我遇到了完全相同的问题，在尝试存储对象数组（或其他任何对象）时，秋田商店保存了一个数组，其中数组的每个成员都是我尝试存储的数组中的最后一个对象。说实话，我们在 JavaScript 方面失败了，解决方案是一个简单的扩展运算符：

  this.digitalAdTopicsStore.set({ ...digitalAdTopic });

这就是为秋田商店设置数组的方法。