我对所有部分都具有复选框，如果我单击复选框之一并单击提交按钮，则必须在控制台部分中获得该部分的详细信息。 谁能帮我解决这个问题。
**Stackblitz link:** :
https://stackblitz.com/edit/angular-q7y8k1?file=src%2Fapp%2Fapp.component.html
HTML：
<h6 class="col-12 emr_header m-t10">Immune
<input class="pull-right top-4" type="checkbox">
</h6>
<div class="row bg-white m-0 p-t10 brd-blu" id="record_allergy" *ngFor = "let data of immune">
<div class="col-sm-6">
<label class="col-sm-5">Status :</label>
<label class="col-sm-6">{{data.Status}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">WasNotGiven :</label>
<label class="col-sm-7">{{data.WasNotGiven}}</label>
</div>
</div>
提交按钮HTML：
<div class="col-12 m-t20 m-b20 text-right">
<a class="share" (click)="exportEmr(data)">Export to EMR</a>
<a class="reset">Cancel</a>
</div>
TS：
exportEmr(data) {
console.log(data);
}
答案 0 :(得分：1)
一旦用户检查了所需的项目，请使用输入change事件添加您的数据。
将change事件添加到您的输入中。例如：
<input class="pull-right top-4" type="checkbox" value="allergy"
(change)="updateData($event)">
声明一个新变量：
data: any[] = [];
您的updateData函数应处理输入更改事件：
updateData($event) {
if ($event.checked) {
// your logic when user checks the checkbox
const section = $event.target.value; // the value you set to the checkbox
this.data.push(this[section]);
} else {
// your logic when user unchecks the checkbox
console.log('Your logic when user unchecks, you probably want to remove the
item from the array');
}
}
答案 1 :(得分：1)
首先，我注意到您有多个具有相同值的id属性，id应该是唯一的。
HTML：
<div class="tabcontent hide emr_records" id="EMR_RecordsList" style="display: block;">
<h6 class="col-12 emr_header">Allergy
<input class="pull-right top-4" type="checkbox" #allergyViewChild>
</h6>
<div class="row bg-white m-0 p-t10 brd-blu" id="record_allergy" *ngFor="let data of allergy">
<div class="col-sm-6">
<label class="col-sm-4">Criticality :</label>
<label class="col-sm-7">{{data.Criticality}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Patient :</label>
<label class="col-sm-7">{{data.Patient}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Substance :</label>
<label class="col-sm-7">{{data.Substance}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Reaction :</label>
<label class="col-sm-7">{{data.Reaction}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Onset :</label>
<label class="col-sm-7">{{data.Onset}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Recorder :</label>
<label class="col-sm-7">{{data.Recorder}}</label>
</div>
</div>
<!-- Care Plan -->
<h6 class="col-12 emr_header m-t10">CarePlan
<input class="pull-right top-4" type="checkbox" #CarePlanViewChild>
</h6>
<div class="row bg-white m-0 p-t10 brd-blu" id="record_CarePlan" *ngFor="let data of CarePlan">
<div class="col-sm-6">
<label class="col-sm-4">Addresses :</label>
<label class="col-sm-7">{{data.Addresses}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Status :</label>
<label class="col-sm-7">{{data.Status}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Category :</label>
<label class="col-sm-7">{{data.Category}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Prohibited :</label>
<label class="col-sm-7">{{data.Prohibited}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Goal :</label>
<label class="col-sm-7">{{data.Goal}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">code :</label>
<label class="col-sm-7">{{data.code}}</label>
</div>
</div>
<!-- Condition -->
<h6 class="col-12 emr_header m-t10">Condition
<input class="pull-right top-4" type="checkbox" #ConditionViewChild>
</h6>
<div class="row bg-white m-0 p-t10 brd-blu" id="record_Condition" *ngFor = "let data of Condition">
<div class="col-sm-6">
<label class="col-sm-4">ClinicalStatus :</label>
<label class="col-sm-7">{{data.ClinicalStatus}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-5">VerificationStatus :</label>
<label class="col-sm-6">{{data.VerificationStatus}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Asserter :</label>
<label class="col-sm-7">{{data.Asserter}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Code :</label>
<label class="col-sm-7">{{data.Code}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">category :</label>
<label class="col-sm-7">{{data.category}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-5">Severity :</label>
<label class="col-sm-6">{{data.Severity}}</label>
</div>
</div>
<!-- Device -->
<h6 class="col-12 emr_header m-t10">Device
<input class="pull-right top-4" type="checkbox" #deviceViewChild>
</h6>
<div class="row bg-white m-0 p-t10 brd-blu" id="record_Device" *ngFor = "let data of device">
<div class="col-sm-6">
<label class="col-sm-4">Udi :</label>
<label class="col-sm-7">{{data.Udi}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-5">Status :</label>
<label class="col-sm-6">{{data.Status}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Model :</label>
<label class="col-sm-7">{{data.Model}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-5">ExpirationDate :</label>
<label class="col-sm-6">{{data.ExpirationDate}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Patient :</label>
<label class="col-sm-7">{{data.Patient}}</label>
</div>
</div>
<!-- Immunization -->
<h6 class="col-12 emr_header m-t10">Immunization
<input class="pull-right top-4" type="checkbox" #immunizationViewChild>
</h6>
<div class="row bg-white m-0 p-t10 brd-blu" id="record_Immunization" *ngFor = "let data of immunization">
<div class="col-sm-6">
<label class="col-sm-5">Status :</label>
<label class="col-sm-6">{{data.Status}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">WasNotGiven :</label>
<label class="col-sm-7">{{data.WasNotGiven}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-5">VaccineCode :</label>
<label class="col-sm-6">{{data.VaccineCode}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4"> LotNumber :</label>
<label class="col-sm-7">{{data.LotNumber}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-5"> Date :</label>
<label class="col-sm-6">{{data.Date}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Patient :</label>
<label class="col-sm-7">{{data.Patient}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-5">Route :</label>
<label class="col-sm-6">{{data.Route}}</label>
</div>
<div class="col-sm-6">
<label class="col-sm-4">Site :</label>
<label class="col-sm-7">{{data.Site}}</label>
</div>
</div>
<!-- Save and Cancel Button -->
<div class="col-12 m-t20 m-b20 text-right">
<a class="share" (click)="exportEmr()">Export to EMR</a>
<a class="reset">Cancel</a>
</div>
TS：
export class AppComponent {
@ViewChild('allergyViewChild') allergyViewChild: ElementRef;
@ViewChild('CarePlanViewChild') CarePlanViewChild: ElementRef;
@ViewChild('ConditionViewChild') ConditionViewChild: ElementRef;
@ViewChild('deviceViewChild') deviceViewChild: ElementRef;
@ViewChild('immunizationViewChild') immunizationViewChild: ElementRef;
public msgs: any[] = [];
allergy:any;
CarePlan:any;
Condition:any;
device:any;
immunization:any;
constructor() { }
ngOnInit() {
this.allergy = [{"Criticality":"CRITL","Patient":"Jason Argonaut","Substance":"PENICILLIN G","Reaction":"Confirmed","Onset":"2012-11-07T00:00:00Z","Recorder":"MOORE, SEAN"}]
this.CarePlan = [{"Addresses":"CRITL","Status":"active","Category":"other","Prohibited":"FALSE","Goal":"Hemoglobin A1c","code":"CBC AND DIFFERENTIAL"}]
this.Condition = [{"ClinicalStatus":"Active","VerificationStatus":"Confirmed","Asserter":"MOORE, SEAN","Code":"","category":"","Severity":"Medium"}]
this.device = [{"Udi":"(17)170324(21)455884315749","Status":"Available","Model":"G754-B","ExpirationDate":"2017-03-24T00:00:00Z","Patient":"Jason Argonaut"}]
this.immunization = [{"Status":"Completed","WasNotGiven":"FALSE","VaccineCode":"DTP-Hib-Hep B","LotNumber":"12321","Date":"2016-01-09T00:00:00Z","Patient":"Jason Argonaut","Route":"Intravenous","Site":"Left arm"}]
}
exportEmr() {
if(this.allergyViewChild.nativeElement.checked){
console.log(this.allergy);
}
if(this.CarePlanViewChild.nativeElement.checked){
console.log(this.CarePlan);
}
if(this.ConditionViewChild.nativeElement.checked){
console.log(this.Condition);
}
if(this.deviceViewChild.nativeElement.checked){
console.log(this.device);
}
if(this.immunizationViewChild.nativeElement.checked){
console.log(this.immunization);
}
}
}
答案 2 :(得分：1)
Bhrungarajni，以“角型”工作
//declare an array of checks
checks:boolean[]=[]
//use ngModel in your .html
<h6 class="col-12 emr_header">Allergy
<input ([NgModel)]="check[0]" class="pull-right top-4" type="checkbox" #allergyViewChild>
</h6>
...
<h6 class="col-12 emr_header">Careplan
<input ([NgModel)]="check[1]" class="pull-right top-4" type="checkbox" #careplanViewChild>
</h6>
....
//In submit use stread operator
let result:any{}
if (check[0])
result=this.allergy;
if (check[1])
result={...result,this.careplan}
...
通过这种方式，您可以尝试在唯一的数组中定义变量