在推送对象时，我得到的所有内容都是 NULL angular2+typescript
On pushing object I am getting everything as NULL angular2+typescript
我在提交时绑定到 html 表单我想将对象推送到 array.JSON.stringify(shift1) 给我正确的结果。
但是当我把它推入数组时。一切都被推送为 NULL。
我不明白发生了什么事。我用过界面。
它是否会导致任何类型转换问题？这很烦人。
如何在打字稿中处理接口？这也是我的一个谜。
On 每次添加 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>
出现这种行为的原因是因为您使用的是双向绑定。当您在表单中使用 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>
DEMO
我在提交时绑定到 html 表单我想将对象推送到 array.JSON.stringify(shift1) 给我正确的结果。
但是当我把它推入数组时。一切都被推送为 NULL。
我不明白发生了什么事。我用过界面。
它是否会导致任何类型转换问题？这很烦人。
如何在打字稿中处理接口？这也是我的一个谜。
On 每次添加 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>
出现这种行为的原因是因为您使用的是双向绑定。当您在表单中使用 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>