angular - 在 Angular-ngrx 应用程序中，页面刷新后图标会改变颜色，而不仅仅是点击后

Question

当用户单击它并将完成的字段更新为 true 并设置日期时，我正在尝试将 mat-icon 的颜色从灰色更改为绿色。在后台请求中正常工作的一切都将转到服务，并且状态会在按钮单击时更新，但是在 UI 中，当我刷新页面时，更改会反映出来。我在哪里做错了？

`html`
<div class="reading-list-item" *ngFor="let b of readingList$ | async">
<button
    id="markAsFinish"
    class="tooltip"
    [attr.aria-label]="'Finish Reading'"
    mat-icon-button
    [style.color]="b.finished ? '#62c926' : 'grey'" 
    (click)="finishReading(b, b.bookId)"    
    >
      <mat-icon>{{ b.finished ? 'assignment_turned_in' : 'assignment_late' }}</mat-icon>
      <span class="tooltiptext">Finished Reading</span>
    </button>

`component.ts`
finishReading(item, id){
      this.store.dispatch(markBookAsFininshed({ item }))

  }

export const markBookAsFininshed = createAction(
  '[Books Search Results] Mark as finished after reading',
  props<{ item: ReadingListItem }>()
);

 on(ReadingListActions.markBookAsFininshed, (state, action) =>
    readingListAdapter.updateOne({ id: action.item.bookId, changes: action.item }, state)
  ),

updateFinishDate$ = createEffect(() =>
    this.actions$.pipe(
      ofType(ReadingListActions.markBookAsFininshed),
      concatMap(({ item }) =>
        this.http.put(`/api/reading-list/${item.bookId}/finished`, item)
      )
    ),{dispatch: false}
  );

`service.ts`
 async markAsRead(id: string): Promise<void> {
      this.storage.update(list => {
        
        const index = list.findIndex(x => x.bookId === id);

        list[index].finished = true;
        list[index].finishedDate = new Date().toISOString();

        return list;
    });

@Put('/reading-list/:id/finished')
  async updateFinishedReadingList(@Param() params) {
    return await this.readingList.markAsRead(params.id);
  }**strong text**

标签： angulartypescriptngrx