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

Question

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

Image to the console error

现在，当您将 tasksList 数组记录到控制台时。每个任务获得相同的值 "date"。任务的所有实例的值都被覆盖。我希望对象对每个人都有单独的 "date" 值。

// 应用程序组件

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

我看到一些 "strange" 宽度 this.taskObj.title = this.taskForm.get('taskTitle').value;

使用

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

Answer 2

您需要像这样在您的服务方法中传播您的 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);
}

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

why are values in object updated on submit

typescript

angular2-forms

angular2-template

angular2-services

angular