时间戳

首页 > 解决方案 > 在模板中更新我的日期对象失败

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

问题描述

实际上，我的日期对象的 ngxs (3.2.0) 状态管理存在问题。我正在尝试更新我的应用程序中的显示日期（带有角度材料的 Angular 6 应用程序），该操作已正确调度并且日期对象在状态内发生更改，但是当日期更改时订阅者不执行任何操作，因此我的模板没有更新。

这是我的动作文件 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>

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

如果您有任何想法，或者您在我的代码中发现了一个大错误...

标签： angularstate-managementngxs

解决方案

在你的行动中：

@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 状态

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

推荐阅读