为什么对象中的值已更新提交

Question

每次用户提交表单时，与该任务相关的数据都会存储在一个对象中，并且该对象将被传递到包含任务列表的数组中。现在

Image to the console error

当您登录的tasksList阵列控制台。每个任务获得“日期”的相同值。所有任务实例的值都被覆盖。我希望对象为每个人分别设置“日期”值。

//应用组件

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormControl } from '@angular/forms'; 
import { ITaskDetails } from './interfaces/task-details'; 
import { TaskService } from './services/task.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    currentDate: {}; 
    taskForm: FormGroup; 
    taskArr: ITaskDetails[]; 
    taskObj: ITaskDetails = { 
    title: '', 
    description: '', 
    date: null 
    }; 

    constructor(private taskSer: TaskService) { 
    this.currentDate = new Date().toISOString().substring(0, 10); 
    } 
    ngOnInit() { 
    this.taskForm = new FormGroup({ 
     'taskTitle': new FormControl(''), 
     'description': new FormControl(''), 
     'date': new FormControl(this.currentDate) 
    }); 
    console.log(this.taskForm); 
    } 

    onSubmit() { 
    this.taskObj.title = this.taskForm.get('taskTitle').value; 
    this.taskObj.description = this.taskForm.get('description').value; 
    this.taskObj.date = this.taskForm.get('date').value; 

    console.log(this.taskObj); 

    this.taskSer.setData({...this.taskObj}); 
    this.taskArr = this.taskSer.getdata(); 
    console.log(this.taskArr); 
    } 
} 

//任务服务

import { Injectable } from '@angular/core'; 
import { ITaskDetails } from '../interfaces/task-details'; 

@Injectable() 
export class TaskService { 
    taskArr: ITaskDetails[] = []; 
    taskDetails = { 
    title: '', 
    description: '', 
    date: null 
    }; 

    setData(obj: ITaskDetails) { 
    this.taskDetails.title = obj.title; 
    this.taskDetails.description = obj.description; 
    this.taskDetails.date = obj.date; 
    this.taskArr.push(this.taskDetails); 
    } 
    getdata() { 
    return this.taskArr; 
    } 
    constructor() { } 

} 

//形式模板

<section class="container"> 
    <div class="panel panel-default"> 
    <div class="panel-heading">Add a Task</div> 
    <div class="panel-body"> 
     <form class="form-horizontal" [formGroup]="taskForm" (ngSubmit)="onSubmit()"> 
     <div class="form-group"> 
      <label for="title" class="col-sm-2 control-label">Title *</label> 
      <div class="col-sm-10"> 
      <input type="text" class="form-control" id="taskTitle" placeholder="Title of Task" formControlName="taskTitle"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="description" class="col-sm-2 control-label">Description *</label> 
      <div class="col-sm-10"> 
      <input type="text" class="form-control" id="description" placeholder="Enter Your Description" formControlName="description"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="date" class="col-sm-2 control-label">Date of Completion *</label> 
      <div class="col-sm-10"> 
      <input type="date" class="form-control" id="date" formControlName="date"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-6"> 
      <button type="submit" class="btn btn-default" [disabled]="!taskForm.valid">Submit your data</button> 
      </div> 
     </div> 
     </form> 
    </div> 
    </div> 
</section> 
<section class="container"> 
    <app-task-list></app-task-list> 
</section> 

Answer 1

你需要来传播你的taskDetails对象的服务方法这样

setData(obj: ITaskDetails) { 
    this.taskDetails.title = obj.title; 
    this.taskDetails.description = obj.description; 
    this.taskDetails.date = obj.date; 
    this.taskArr.push({...this.taskDetails}); <<<<<this 
} 

不是当您调用方法并传递对象时。删除传播对象的形式

onSubmit() { 
    this.taskObj.title = this.taskForm.get('taskTitle').value; 
    this.taskObj.description = this.taskForm.get('description').value; 
    this.taskObj.date = this.taskForm.get('date').value; 

    console.log(this.taskObj); 

    this.taskSer.setData({...this.taskObj}); <<<<this to setData(this.taskObj); 
    this.taskArr = this.taskSer.getdata(); 
    console.log(this.taskArr); 
} 

Answer 2

我看到一些 “陌生” 宽度this.taskObj.title = 。this.taskForm.get（ 'taskTitle'）值;

使用

this.taskObj.title = this.taskForm.value.taskTitle; 
this.taskObj.title = this.taskForm.value.taskTitle; 
this.taskObj.description = this.taskForm.value.description; 
this.taskObj.date = this.taskForm.value.date; 

，或者更好，

//change the submit as 
<form class="form-horizontal" [formGroup]="taskForm" (ngSubmit)="onSubmit(taskForm)"> 

//And in the onSubmit 
onSubmit(dataForm: FormGroup) { 
    if (dataForm.isValid) 
    { 
    this.taskObj.title = dataForm.value.taskTitle; 
    .... 
    } 
} 

无论如何，请检查您的服务

setData(obj: ITaskDetails) { 
    console.log(obj); //<--this 
    ... 
}