更新模板中我的日期对象失败

Question

实际上，我遇到了日期对象的 ngxs (3.2.0) 状态管理问题。我正在尝试更新我的应用程序中的显示日期（Angular 6 应用程序 angular material），操作已正确分派并且日期对象在状态内更改但订阅者不这样做日期更改时的任何内容，因此我的模板不会更新。

这是我的动作文件 currentDate.action.ts :

export class CreateDate {
    static readonly type = '[app] create date';
    constructor(public payload: Date) { }
}

export class ChangeDate {
    static readonly type = '[app] change date';
    constructor(public payload: Date) { }
}

export class IncrementDate {
    static readonly type = '[app] increment date';
    constructor() { }
}

export class DecrementDate {
    static readonly type = '[app] decrement date';
    constructor() { }
}

这是我的currentDate.state.ts：

export interface CurrentDateModel {
    selectedDate: Date;
    currentDate: Date;
    checker: number;
}

@State<CurrentDateModel>({
    name: 'currentDate',
    defaults: {
        currentDate: new Date(),
        selectedDate: new Date(),
        checker: 0
    },
})
export class CurrentDateState {

@Action(CreateDate)
createDate(ctx: StateContext<CurrentDateModel>, { payload }: CreateDate) {
    ctx.patchState({ currentDate: payload });
}

@Action(IncrementChecker)
IncrementChecker(ctx: StateContext<CurrentDateModel>) {
    const state = ctx.getState();
    state.checker = state.checker + 1;
    ctx.setState(state);
}

@Action(IncrementDate)
IncrementDate(ctx: StateContext<CurrentDateModel>) {
    const state = ctx.getState();
    state.selectedDate.setMonth(state.selectedDate.getMonth() + 1);
    ctx.setState(state);
}

@Action(DecrementDate)
DecrementDate(ctx: StateContext<CurrentDateModel>) {
    const state = ctx.getState();
    state.selectedDate.setMonth(state.selectedDate.getMonth() - 1);
    ctx.setState(state);
}

@Action(ChangeDate)
changeDate(ctx: StateContext<CurrentDateModel>, { payload }: ChangeDate) {
    ctx.patchState({ currentDate: payload });
}

}

我的 header.ts 文件中的代码：

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

 @Select(state => state.currentDate.selectedDate) currentDate: Observable<Date>;

 @Select(state => state.currentDate.checker) check: Observable<number>;

  constructor(private store: Store) { }

  ngOnInit() {
    this.currentDate.subscribe((date) => console.log('hello from header', date));
    this.check.subscribe(() => console.log('i changed'));
  }

  increment() {
    this.store.dispatch(new IncrementChecker());
  }

  decrementDate() {
    this.store.dispatch(new DecrementDate());
  }

  incrementDate() {
    this.store.dispatch(new IncrementDate());
  }

}

在我的 template.html 文件中：

<mat-toolbar color="primary">
  <div>
    <a mat-button routerLink="">Test</a>
  </div>
  <div>{{check | async}}</div>
  <div><mat-icon (click)="decrementDate()">arrow_left</mat-icon></div>
  <div>{{currentDate  | async | date:'MMMM' | titlecase}}</div>
  <div><mat-icon (click)="incrementDate()">arrow_right</mat-icon></div>
  <div fxFlex fxLayout fxLayoutAlign="flex-end">
    <button mat-button>Se connecter</button>
  </div>
  <div><button mat-button (click)="increment()">Increment</button></div>
</mat-toolbar>

我尝试了很多东西（这就是为什么你也可以在我的文件中看到 "check" 变量）但是没有成功地看到日期对象的更新但是成功地看到另一个对象，比如我的检查器在这里或我的其他状态对象。

如果您有任何想法或者如果您发现我的代码中存在重大错误...

Answer 1

在你的行动中：

@Action(IncrementDate)
IncrementDate(ctx: StateContext<CurrentDateModel>) {
    const state = ctx.getState();
    state.selectedDate.setMonth(state.selectedDate.getMonth() + 1);
    ctx.setState(state);
}

您应该按如下方式更新状态：

let tmpDate = state.selectedDate;
ctx.setState({...state, selectedDate: tmpDate.setMonth(tmpDate.getMonth() + 1});

参见：ngxs state

或者你可以使用 patchState 而不是 setState： patchState vs setState

更新模板中我的日期对象失败

Updating fails on my date object in template

state-management

angular

ngxs