我如何解决日期 angular 的问题

Question

I have a problem whit new Date(), when i add a color i see the time and the date, when i add a new color the date above resets, how can I capture the date when I add the color without resetting the above date?

stackblitz project

html

<form [formGroup]="colorsForm">
  <div>
    <label for="colorName">Color Name</label>
      <input id="colorName" type="text" class="form-control" 
        formControlName="colorName" name="colorName"/>
  </div>
  <button  type="button"  (click)="addCorlo()">ADD</button>
</form>
<div
*ngFor="let color of colorsList trackBy: trackByFn; let i = index; "
(click)="setActive(color)"
[ngClass]="{'active' : color.colorName === active?.colorName}"
>
<div
> ID {{ i }} - color {{ color.colorName }}---{{dayHour | date:"dd/mm/yy, h:mm:ss"}}<button (click)="delete(i)">DELETE</button></div>
</div>


<h1>COLOR BOX</h1>
<div id="colorBox" [style]="'background:' + active?.colorName"><h2>{{ active?.colorName }}</h2></div>

ts

 dayHour:any;

addCorlo() {
    if (this.colorsForm.valid) {
      let color = { 
        colorName: this.colorsForm.value.colorName,
      };
      this.colorsList.push(color);
    }
    this.colorsForm.reset();
    this.active = this.colorsList[0];
    this.dayHour = Date();
   }

Answer 1

you need make the dayHour and array to

dayHour:any[]=[]
addCorlo(){
  ...
  this.dayHour.push(new Date())
}

and use

{{dayHour[i] | date:"dd/mm/yy, h:mm:ss"}}

Or make your colorsList and array of object

addCorlo(){
  ...

  this.colorsList.push( //add an object with two properties
      {
        color:this.colorsForm.value.colorName,
        dayHour:new Date()
      });
}

And use

{{color.dayHour | date:"dd/mm/yy, h:mm:ss"}}