Question

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

现在，您将tasksList数组记录到控制台。每个任务都得到＆＃34; date＆＃34;的相同值。将覆盖所有任务实例的值。我希望对象具有＆＃34; date＆＃34;的单独值。为每个人。

// app component

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

我看到一些“奇怪”的宽度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);
}

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

2 个答案: