NgRx Signal Store 未更新状态

Question

场景：我需要制作一个包含待办事项、进行中和已完成项目的看板。用户应该能够在不同的泳道中拖放项目、创建新的待办事项以及删除项目。我使用信号进行 Reactivity 并使用 NgRx SignalStore 进行状态管理。

我的

app.component.ts

看起来像这样：

<app-to-do-card (onDragStart)="showData($event)"></app-to-do-card>

 <app-implementing-card [droppedItem]="droppedItemFromTodoToInProgress"
   [droppedItemFromDone]="droppedItemFromDone"
    (onDragInProgressStart)="sendDataToToDoList($event)"></app-implementing-card>

这是我的应用程序卡片：

@for (item of allItems();  track item){

<div pDraggable dragEffect = "move"
(onDragStart)="dragStart(item)" 
(onDragEnd)="dragEnd()"

class=" p-2 w-10 h-2 text-sm opacity-80 border-1 border-round border-200 shadow-3 hover:shadow-8  ">       

<h5>{{item.id}} - {{item.name}}</h5>
<p>{{item.status}} - {{item.description}}</p>   
</div>
}
</div>
<app-new-item (onItemAdded)="displayNewItems($event)"></app-new-item>

displayNewItems($event : Item[])
 {
   this.allItems.set($event);  
 }

这是我的应用程序新项目组件：

addNewItem()
 {
  let newItemDescription = this.newItemForm.controls['description'].value;
  let newItemName = this.newItemForm.controls['name'].value;

  let newItem : Item = 
  {
   id: (Math.floor(Math.random() * 10000)).toString(), //Random ID Assigned to each Item
   name: newItemName, 
   description: newItemDescription,
   status: TaskStates.ToDo
  }
this.store.addItem(newItem);
this.newItemForm.reset();
this.onItemAdded.emit(this.store.items())

 }

这是我的商店：

export const AllItemStore = signalStore
(
  { providedIn: 'root' },
  
  withState(ItemState),

  withMethods((store)=>
    ({
        addItem(newItem : Item): void
        {
            patchState(store, {items: [...store.items() , newItem]} )
            //console.log(state) //shows items inside state added successfully
        },
        getAllItems(): Item[]
        {
          return store.items(); //returns []
        },

        updateItemStatus(itemId: string, status: TaskStates) : void
        {
          //...store.items() is empty array []
          patchState(store, {items: {...store.items() , }})
          return ItemState.items.map((item)=>
            {
              return item.id === itemId ? {...item, status: status} : item
            })
        }
    }))
);

问题：

我的 updateItemStatus 不起作用。我无法获取当前商店中所有商品的列表，无法按 ID 执行搜索并将状态更新为进行中/完成。尽管 addItems 正确设置了新项目的状态，但 getAllItems 和 updateItemStatus 都返回空数组 []。

PS：我使用的是 Angular 17，所有组件都是独立的。

Answer 1

确保您从组件调用

this.store.updateItemStatus(...)

。如果您从服务中调用它，它将不起作用。我还没弄清楚为什么，但这解决了问题。