Question

我现在已经完成了这方面的工作，尝试构建一个跟踪时间表的小时数的应用程序，到目前为止所有计算的逻辑似乎都适合几个小时，但无论出于何种原因，表单创建2个对象时它被提交了，我完全不知道为什么。

这是在表单提交时输出到控制台的内容，数据全部正确并与表单中的内容对齐但是它是重复的，我完全不知道为什么;

day-app.component.ts:44 Object {date: "2016-08-08", startTime: "09:00", endTime: "17:30", client: "qwe", project: "qwe"…}
day-app.component.ts:44 Object {date: "2016-08-08", startTime: "09:00", endTime: "17:30", client: "qwe", project: "qwe"…}

Day.ts - 用于保存每天记录的数据的对象

export class Day {
    id: number;
    date: Date;
    startTime: Date;
    endTime: Date;
    hours: number;
    client: string;
    project: string;
    task: string;
}

Day.service.ts - 用于存储传入数据的类

import { Injectable } from '@angular/core';
import { Day } from './day';

@Injectable()
export class DayService {

    lastId: number = 0;

    public days = [];

    addDay(day): void {
        this.days.push(day);
    }

Day-app.component.ts - 用于呈现视图和表单并将表单数据发送到Day Service进行存储的组件

import { Component } from '@angular/core';
import { DayService } from '../day.service';
import { Day } from '../day';

@Component({
    moduleId: module.id,
    selector: 'app-day-app',
    templateUrl: 'day-app.component.html',
    styleUrls: ['day-app.component.css'],
    providers: [DayService],
})

export class DayAppComponent {

    constructor(private dayService: DayService) {
    }

  // Can access methods from DayService;
  // dayService.method
  // formService.method

    get days() {
        return this.dayService.getAllDays();
    }

    onSubmit(form): void {
        let formData = form;

        let timesTotal = (formData.startTime-formData.endTime*24);

        let startDate = new Date(Date.parse(formData.date + " " + formData.startTime));
        let endDate = new Date(Date.parse(formData.date + " " + formData.endTime));
        let timeDiff = (((endDate.getTime()-startDate.getTime())/3600)/1000);

        let newDay = {
            date : formData.date,
            startTime : formData.startTime,
            endTime : formData.endTime,
            client : formData.client,
            project : formData.project,
            hours : timeDiff
        };

        console.log(newDay);
        this.dayService.addDay(newDay);
      }
}

日期-app.component.html

<form #f="ngForm"
            (ngSubmit)="onSubmit(f.value)"
            class="form">
            <div class='input-group'>
                <div class='row'>
                    <div class='col-sm-12 col-md-12'>
                        <div class='col-sm-6 col-md-6'>
                            <label>Date to add</label>
                                <input type='date' 
                                name='date' 
                                placeholder='What date did you work?' 
                                class='form-control' 
                                ngModel /> 
                            <br />
                            <label>Client</label>
                                <input type='text' 
                                name='client' 
                                placeholder='Which client were you working for?' 
                                class='form-control' 
                                ngModel />
                            <br>
                        </div>
                        <div class='col-sm-6 col-md-6'>
                            <div class='row'>
                                <div class='col-sm-6 col-md-6'>
                                    <label>Clocked In</label>
                                        <input type='time' 
                                        name='startTime' 
                                        placeholder='Punch in time'  
                                        class='form-control' 
                                        ngModel />
                                </div>
                                <div class='col-sm-6 col-md-6'>
                                    <label>Clocked Out</label>
                                        <input type='time' 
                                        name='endTime' 
                                        placeholder='Punch out time'  
                                        class='form-control' 
                                        ngModel />
                                </div>
                            </div>
                                <label>Project</label>
                                    <input type='text' 
                                    name='project' 
                                    placeholder='Which project were you working on?'  
                                    class='form-control' 
                                    ngModel />
                        </div>
                    </div>
                    <hr />
                </div>
            </div>
            <br>
            <input class='btn btn-sm btn-success' autofocus="" type='submit' value='Add Day' />
        </form>

Angular2表单数据重复？

0 个答案: