Angular 4中如何为项目状态变更添加变更日期记录？

我来帮你一步步实现这个功能，让每次项目状态变更都能记录对应的日期：

1. 调整Project接口结构 #

首先得扩展你的Project接口，用来存储状态变更的记录。如果需要保存每次变更的历史，可以新增一个数组来存详细记录；如果只需要最新的变更日期，加一个日期字段就行。

方案一：保存所有状态变更历史 #

// 新增一个接口存储单条状态变更记录
export interface StateChangeRecord {
  state: number;       // 变更后的状态值
  changeDate: Date;    // 变更的时间
}

// 扩展原有的Project接口
export interface Project {
  state: number;
  stateChangeHistory: StateChangeRecord[]; // 存储所有变更记录
}

方案二：只记录最新的变更日期 #

如果不需要历史，只需要最新的变更时间，接口可以简化：

export interface Project {
  state: number;
  lastStateChangeDate?: Date; // 可选字段，初始状态下可能没有值
}

2. 组件中实现状态变更的逻辑 #

接下来在组件里处理状态变更时的日期记录逻辑：

对应方案一（保存历史）的组件代码 #

// 初始化编辑中的项目，确保stateChangeHistory是一个空数组
editProject: Project = {
  state: 0, // 替换成你的初始状态值
  stateChangeHistory: []
};

// 状态变更时触发的方法
onStateChange() {
  // 避免重复添加相同状态的记录（比如连续点击同一个状态选项）
  const latestRecord = this.editProject.stateChangeHistory.at(-1);
  if (!latestRecord || latestRecord.state !== this.editProject.state) {
    this.editProject.stateChangeHistory.push({
      state: this.editProject.state,
      changeDate: new Date()
    });
  }
}

对应方案二（仅最新日期）的组件代码 #

editProject: Project = {
  state: 0, // 初始状态值
  lastStateChangeDate: undefined
};

onStateChange() {
  // 每次状态变更直接更新最新日期
  this.editProject.lastStateChangeDate = new Date();
}

3. 调整模板中的事件绑定 #

注意：原模板里用(click)事件不太合适，因为点击下拉框本身就会触发，而不是只有状态变更时。建议改用(ngModelChange)，它会在ngModel的值真正变化时才触发：

<div fxLayout="column" fxLayoutAlign="start start" fxLayoutGap="15px"> 
  <app-dropdown 
    [(ngModel)]="editProject.state" 
    label="Project State" 
    labelWidth="100px" 
    optionWidth="250px" 
    orientation="top" 
    [items]="projectState" 
    (ngModelChange)="onStateChange()"
  ></app-dropdown>
</div>

这样每次用户选择不同的项目状态时，就会自动记录对应的变更日期啦～

内容的提问来源于stack exchange，提问作者user9049996