如何使用反作用角度形式的复选框

Question

我是angular的新手，目前我正在angular中查找复选框，我有三个复选框，必须在UI中显示选中或未选中的复选框。

我正在从json中启用/禁用，我需要显示是否启用意味着应该选中复选框，禁用意味着未选中复选框。

这就是我在html 中尝试的内容

<form [formGroup]="portFilterGroup">
<div class="form-group row">
<div class="col-md-4 text-left" id="email">
<label for="email"><input type="checkbox" (change)="onChecked($event)"  formcontrolName="emailData"  value="{{emailData}}" [checked]="isChecked"  >&nbsp;
<b>Email(POP3, IMAP, SMTP)</b></label>
</div>
</div>
<div class="form-group row">
<div class="col-md-4 text-left" id="ftp">
<label for="ftp"><input type="checkbox" formcontrolName="ftpData"  [checked]="isChecked" value="{{ftpData}}">&nbsp; <b>FTP</b></label>
</div>
</div>
<div class="form-group row">
<div class="col-md-4 text-left" id="http">
<label for="http"><input type="checkbox" formcontrolName="httpData"
[checked]="isChecked">&nbsp;<b>HTTP</b></label>
</div>
</div>
</form>

打字脚本文件

portFilterForm(){
this.portFilterGroup = this.fb.group({
emailData: new FormControl(''),
ftpData: new FormControl(''),
httpData: new FormControl('')
})
}

onChecked(e){  
console.log("e", e.target) 
if (e.target == 'enabled'){
this.isChecked = true; 
}
else{
this.isChecked = false;
}
}
gettingData(){
this.httpClient.get("assets/json/data.json").subscribe((data:any) =>{
console.log(data);
this.emailData = this.onChecked(data.email)
this.httpData = this.onChecked(data.http)
})
}

json文件是

{
"email": "enabled",
"ftp": "disabled",
"http": "enabled"
}

这是我正在尝试的代码，但没有得到预期的输出(enabled表示已检查，disabled表示未检查(有人能帮我吗？

Answer 1

好的，所以你可以使用角度方式读取这里的

html

<form [formGroup]="portFilterGroup">
<div class="form-group row">
<div class="col-md-4 text-left" id="email">
<label
><input
type="checkbox"
[formControl]="portFilterGroup.controls['emailData']"
/>&nbsp; <b>Email(POP3, IMAP, SMTP)</b></label
>
</div>
</div>
<div class="form-group row">
<div class="col-md-4 text-left" id="ftp">
<label
><input
type="checkbox"
[formControl]="portFilterGroup.controls['ftpData']"
/>&nbsp; <b>FTP</b></label
>
</div>
</div>
<div class="form-group row">
<div class="col-md-4 text-left" id="http">
<label
><input
type="checkbox"
[formControl]="portFilterGroup.controls['ftpData']"
/>&nbsp;<b>HTTP</b></label
>
</div>
</div>
</form>
{{ portFilterGroup.value | json }}
<button (click)="gettingData()">submit</button>

ts文件

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular 6';
portFilterGroup: FormGroup;
constructor(private fb: FormBuilder) {
this.portFilterForm();
}
portFilterForm() {
this.portFilterGroup = this.fb.group({
emailData: new FormControl(false),
ftpData: new FormControl(false),
httpData: new FormControl(false),
});
}
gettingData() {
console.log(this.portFilterGroup.value);
// this.httpClient.get('assets/json/data.json').subscribe((data: any) => {
//   console.log(data);
//   this.emailData = this.onChecked(data.email);
//   this.httpData = this.onChecked(data.http);
// });
}
}

堆叠式