我正在建立一个注册表格，就像：用户输入他的详细信息 - 选择他的类型(老师或学生(
然后选择他属于哪个级别和等级。
我从Web服务中获取成绩和类数据，然后使用复选框将其放在NGFOR中。
并使用Post方法将HTTP与用户详细信息发送到另一个Web服务。
如何将数据值从复选框发布到Web服务，例如他检查了2A类IT帖子到API(2A(？
？我的组件TS：
name: any[];
email: any[];
password: any[];
type_id: number[] = [];
school_id: any[];
grade_id: any[] = [];
class_id: any[] = [];
subject_id: any[] = [];
grades:string;
classes:string;
subjects:string;
id: number[] = [];
imageFile: any;
type_name: any[];
public selectedSchoolId: number;
public schoolDetail: SchoolsModel;
public divisionList: SchoolsModel[];
private url = 'http://crm.easyschools.org/api/en/users/register';
getFile(event){
this.imageFile = event.target.files[0];
}
onSubmit(form: NgForm) {
var data = form.value;
let formData: FormData = new FormData();
// debugger;
formData.append('image', this.imageFile, this.imageFile.name);
formData.append('name', data.name);
formData.append('email', data.email);
formData.append('password', data.password);
formData.append('type_name', data.type_name);
formData.append('type_id', this.type_id);
formData.append('school_id', this.selectedSchoolId;
formData.append('class_id[0]', 7);
formData.append('grade_id[0]', 17);
formData.append('subject_id', 9);
this._http.post(this.url, formData)
.subscribe(response => {
// debugger;
console.log(response);
}, (err: HttpErrorResponse) => {
console.log(err);
});
}
ngOnInit(): void {
this.route.params.subscribe((params) => {
this.selectedSchoolId = +params.id;
this.getSelectedSchoolDetail();
});
}
我修复了类ID，等级ID和主题ID的数据，这是我想学习如何从复选框发布的数据。
我的组件html：
<form #registerForm="ngForm" enctype="multipart/form-data"><!--==
start form ==-->
<div class="col-md-12 " id="append-types-here" style="text-align:
center;">
<div class="row col-md-12">
<input name="name" ngModel #name="ngModel" style="text-align:
left;" type="text" class="rounded-inputs26 col-md-6 add-account-
inputs1" placeholder="Fullname ">
</div>
<input name="email" ngModel #email="ngModel" style="text-align: left;"
type="email" class="rounded-inputs26 col-md-6 add-account-inputs1"
placeholder="Email" >
<input name="password" ngModel #password="ngModel" style="text-align:
left;" type="password" class="rounded-inputs26 col-md-6 add-account-
inputs1" id="password1" placeholder="Password" >
<input name="password" style="text-align: left;" type="password"
class="rounded-inputs26 col-md-6 add-account-inputs1"
id="confirm_password1" placeholder="Confirm password" >
<span id='message1'></span>
<select id="select-type" [(ngModel)]="type_id" name="type_id"
class="rounded-inputs26 col-md-6 add-account-inputs1">
<option selected="selected">Account Type...</option>
<option id="type1" [ngValue]="3"><span name="type_name"
type="text">Teacher</span></option>
<option id="type2" [ngValue]="4">Parent</option>
<option id="type3" [ngValue]="5">Student</option>
</select>
</div>
<div id="third-type" class="row col-md-12">
<ng-container *ngIf="divisionList">
<div class="col-md-3" style="margin: auto;overflow: auto;">
<div style="list-style: none;background-color:#054360;padding:
10px;color:white;">
<input class="choose-choose5" type="checkbox"> Grades:</div>
<div style="background-color:white;border: solid 1px #004360;float:
left;width: 100%;">
<h6 *ngFor="let division of divisionList" class="pull-left col-md-12"
style="border-bottom:1px solid #999999;padding-top: 5px;">
<input (change)="onChangeGrade($event.target.value)" style="float:
left;margin-left:25px;" class="choose-choose11" type="checkbox" id="">
<label style="padding-right: 90px;white-space: nowrap;">
{{division.name}}</label>
</h6>
</div></div>
<div class="col-md-3" style="margin: auto;overflow: auto;">
<div style="list-style: none;background-color:#054360;padding:
10px;color:white;">
<input class="choose-choose6" type="checkbox"> Classes:</div>
<div style="background-color:white;border: solid 1px #004360;float:
left;width: 100%;">
<h6 *ngFor="let division1 of divisionList" class="pull-left col-md-
12" style="border-bottom:1px solid #999999;padding-top: 5px;">
<input (change)="onChangeClass($event.target.value)" style="float:
left;margin-left:25px;" class="choose-choose12" type="checkbox" >
<label style="padding-right: 90px;white-space: nowrap;">
{{division1.grade[0].classes[0].name}}</label></h6>
</div></div>
<div class="col-md-3 hide" id="subjects-select" style="margin:
auto;overflow: auto;">
<div style="list-style: none;background-color:#054360;padding:
10px; color:white;"> Subjects:</div>
<div style="background-color:white;border: solid 1px #004360;float:
left;width: 100%;">
<h6 *ngFor="let division2 of divisionList" class="pull-left col-
md-12" style="border-bottom:1px solid #999999;padding-top: 5px;">
<input style="float: left;margin-left:25px;" type="radio"
name="choose2" id="third-select7">
<label for="third-select7" style="padding-right: 90px;white-
space: nowrap;">{{division2.grade[0].subjects[0].subject_name}}
</label></h6>
</div>
</div>
</ng-container>
</div>
<input type="file" name="image" (change)="getFile($event)"
multiple="multiple" accept="image/*" ngModel #image="ngModel">
<div class="row col-md-12 col-sm-12 col-xs-12 " style="margin-top:
70px; text-align: center;">
<div class="col-md-4 ">
</div>
<div class="col-md-4">
<button (click)="onSubmit(registerForm)" class="school-footer-
button17" routerLink="/dashboard/:id" style="margin:
auto;">Submit</button>
</div>
<div class="col-md-4 ">
</div>
</div>
</form><!--== end form ==-->
通常，使用类似类的数据，我们将使用小部件之类的下拉列表。这是使用复选框的示例链接。https://embed.plnkr.co/plunk/h9wfgz