javascript - 使用 angular2 检查复选框时如何获取该特定部分的数据

Question

我有所有部分的复选框，如果我单击其中一个复选框并单击提交按钮，我必须在控制台部分获取该部分的详细信息。谁能帮我解决这个问题。

**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);
      }

Answer 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">&nbsp;LotNumber :</label>
          <label class="col-sm-7">{{data.LotNumber}}</label>
      </div>
      <div class="col-sm-6">
          <label class="col-sm-5">&nbsp;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);
          }
      }
}

https://stackblitz.com/edit/angular-rczw2e