如何從Angular 4復選框將數據值發布到Web服務

Question

我正在構建一個注冊表，如下所示：用戶輸入他的詳細信息-選擇他的類型（老師或學生）

然后選擇他所屬的班級和年級。

我從Web服務獲取成績和班級數據，並使用復選框將其放入NgFor中。

並使用POST方法將帶有用戶詳細信息的HTTP發送到另一個Web服務。

如何將數據值從復選框發布到Web服務，就像他是否檢查了將2A類發布到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 ==-->

Answer 1

通常，對於類列表之類的數據，我們將使用下拉列表之類的小部件。 這是使用復選框的示例的鏈接。 https://embed.plnkr.co/plunk/h9wFGz