爲什麼對象中的值已更新提交

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 
    ... 
}