我已将绑定转移到提交时的html表单我想将对象推送到array.JSON.stringify(shift1)给我正确的结果。
但是当我把它推入阵列时。一切都被推送为NULL。
我没有发生什么事。我用过界面。
是否会出现任何类型的铸造问题？它很烦人。
如何处理打字稿中的界面？那也是我的谜语。
每次添加shift1都会获得相同的对象this.shift。如何创建新对象分配更新为新Interface然后将其推送到Array？
import {
Component,
OnInit,
AfterViewInit
} from '@angular/core';
import {
ScriptService
} from './services/script.service';
import {
DatePipe
} from '@angular/common';
interface shiftDetails {
shift_name ? : string;
shift_type ? : string;
base_working_hour ? : string;
start_time ? : string;
end_time ? : string;
multiple_check_in_check_out ? : boolean;
consider_breaks ? : boolean;
break_time ? : string;
pre_shift_time ? : string;
post_shift_time ? : string;
}
@Component({
templateUrl: 'org-setup.component.html',
})
/*class OUUnits {
isChecked = false;
name: string;
}*/
export class OrgSetupComponent implements OnInit, AfterViewInit {
shift: shiftDetails = {
shift_name: null,
shift_type: null,
base_working_hour: null,
start_time: null,
end_time: null,
multiple_check_in_check_out: false,
consider_breaks: false,
break_time: null,
pre_shift_time: null,
post_shift_time: null
};
ShiftDetails1: shiftDetails[] = [];
Sdate: string;
Edate: string;
customCal: string;
constructor(private script: ScriptService, private datePipe: DatePipe) {}
ngOnInit() {
// this.shift.base_working_hour=null;
}
ngAfterViewInit() {
this.script.loadScript("/assets/script.js");
this.script.loadScript("/assets/app/js/plugins/forms/repeater/jquery.repeater.min.js");
this.script.loadScript("/assets/app/js/components/forms/form-repeater.js");
// this.script.loadScript("/assets/app/js/plugins/forms/toggle/bootstrap-switch.min.js");
this.script.loadScript("/assets/app/js/components/forms/switch.js");
console.log("Scrip afterview Init");
}
get bmds() {
return JSON.stringify(this.BiometricDevices);
}
addShift() {
console.log("adding shidt");
let shift1: shiftDetails = {};
//shift1 = shift;
shift1 = this.shift;
console.log(JSON.stringify(shift1));
this.ShiftDetails1.push(shift1);
// console.log(JSON.stringify(this.ShiftDetails1));
}
get shifts() {
return JSON.stringify(this.ShiftDetails1);
}
}
这是html代码
<div class="col-sm-12 mt-1">
<a href="#" data-toggle="modal" data-target="#addshift" class="btn btn-secondary primary-blue">
+ Add shift
</a>
{{ shifts }}
</div>
<div class="modal fade" id="addshift" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Setup a new shift
<br>
<span class="small text-muted font-small-2">Enter your time-out to submit your request</span>
</h5>
</div>
<form (ngSubmit)="addShift() ; shiftForm.reset()" #shiftForm="ngForm">
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<label>Shift name </label>
<input type="text" [(ngModel)]="shift.shift_name" name="shift_name" placeholder="Shift name" class="form-control" #shift_name="ngModel" >
</div>
<div class="col-sm-6">
<label for="">Allow multiple punch-in punch-out? <i class="icon-help-circled primary-blue font-medium-1"></i></label>
<div class="form-group position-relative">
<input type="checkbox" [(ngModel)]="shift.multiple_check_in_check_out" name="multiple_check_in_check_out" #multiple_check_in_check_out="ngModel" class="switchBootstrap" id="switchBootstrap8" data-on-text="Yes" data-off-text="No" data-on-color="success" />
</div>
</div>
</div>
<label>Shift type </label>
<div class="form-group position-relative">
<label class="display-inline-block custom-control custom-radio">
<input type="radio" name="inlineRadio1" [(ngModel)]="shift.shift_type" value="1" name="shift_type" #shift_type="ngModel" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description font-size-1">Start time-End time</span>
</label>
<label class="display-inline-block custom-control custom-radio">
<input type="radio" name="inlineRadio1" [(ngModel)]="shift.shift_type" value="2" name="shift_type" #shift_type="ngModel" checked="true" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Working hours</span>
</label>
<input type="text" placeholder="Base working hours" [(ngModel)]="shift.base_working_hour" name="base_working_hour" class="form-control" #base_working_hour="ngModel">
</div>
<div class="form-group position-relative">
<div class="row">
<div class="col-sm-6">
<input type="text" [(ngModel)]="shift.start_time" name="start_time" placeholder="Start time" class="form-control" #start_time="ngModel">
</div>
<div class="col-sm-6">
<input type="text" [(ngModel)]="shift.end_time" name="end_time" #end_time="ngModel" placeholder="End time" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label for="">Consider breaks in calculation?</label>
<div class="form-group position-relative">
<input type="checkbox" [(ngModel)]="shift.consider_breaks" name="consider_breaks" #consider_breaks="ngModel" class="switchBootstrap" id="switchBootstrap8" data-on-text="Yes" data-off-text="No" data-on-color="success" />
</div>
</div>
<div class="col-sm-6">
<label>Break duration</label>
<input type="text" [(ngModel)]="shift.break_time" name="break_time" #break_time="ngModel" placeholder="Please enter break duration" class="form-control">
</div>
</div>
<div class="form-group position-relative">
<div class="row">
<div class="col-sm-6">
<label>Pre-shift Time </label>
<input type="text" [(ngModel)]="shift.pre_shift_time" name="pre_shift_time" #pre_shift_time="ngModel" placeholder="Earliest allowed start time" class="form-control">
</div>
<div class="col-sm-6">
<label>Post-shift Time </label>
<input type="text" [(ngModel)]="shift.post_shift_time" name="post_shift_time" #post_shift_time="ngModel" placeholder="Latest allowed end time" class="form-control">
</div>
</div>
</div>
<div class="form-group position-relative"> </div>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-secondary primary-blue" data-dismiss="modal" value="Close">
<input type="submit" [disabled]="!shiftForm.form.valid" class="btn btn-info bg-blue bg-darken-2 no-border" value="Add">
</div>
</form>
</div>
</div>
</div>
答案 0 :(得分：2)
出现这种行为的原因是因为您使用的是双向绑定。当您在表单中使用reset时，shift会获得初始值，这些值均为null。因此，当您在提交表单的同时重置表单时，您很快就会将值推送到数组中。这意味着您实际上正在推送已经重置的值，这些值都是null。
这可以通过不使用双向绑定来解决，而是将表单创建的对象推送到数组。因此，请删除[(ngModel)]并仅使用ngModel。您已经构建了表单，表单创建的对象与模型匹配，因此在提交中，您可以引用类型为shiftDetails的参数：
addShift(value: shiftDetails) { // here
this.ShiftDetails1.push(value);
}
并且您的模板（缩短版本）应如下所示:(请记住在提交中传递表单值）：
<form (ngSubmit)="addShift(shiftForm.value) ; shiftForm.reset()" #shiftForm="ngForm">
<label>Shift name </label>
<input type="text" name="shift_name" placeholder="Shift name" class="form-control" ngModel #shift_name="ngModel" >
<label>Shift type </label>
<label class="display-inline-block custom-control custom-radio">
<input type="radio" name="inlineRadio1" ngModel value="1" name="shift_type" #shift_type="ngModel" class="custom-control-input">
</label>
<label class="display-inline-block custom-control custom-radio">
<input type="radio" name="inlineRadio1" ngModel value="2" name="shift_type" #shift_type="ngModel" checked="true" class="custom-control-input">
</label>
<input type="submit" [disabled]="!shiftForm.form.valid" class="btn btn-info bg-blue bg-darken-2 no-border" value="Add">
</form>