文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在使用angular2选中复选框时获取该特定部分的数据

问如何在使用angular2选中复选框时获取该特定部分的数据
EN

Stack Overflow用户

提问于 2018-08-29 12:16:06

回答 3查看 48关注 0票数 0

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

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

typescript

javascript

angular

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-08-29 12:33:59

首先，我注意到有多个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

票数 1

Stack Overflow用户

发布于 2018-08-29 12:31:26

在用户检查所需项后，使用输入change事件添加数据。

将change事件添加到输入中。例如： <输入class=“拉右上4”type=“复选框”“value=”过敏(change)="updateData($event)">“
声明一个新变量：资料来源: any[] = []；
您的updateData函数应该处理输入更改事件： updateData($event) { if ($event.checked) { //当用户选中复选框const节=$event.target.value时的逻辑；//您设置为复选框this.data.push(此节)的值；}{ //您的逻辑当用户取消选中复选框console.log(‘您的逻辑当用户取消检查时，您可能希望从数组中删除该项’；}}

票数 1

Stack Overflow用户

发布于 2018-08-29 19:19:45

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}
...

顺便说一句，您可以尝试在唯一数组中定义变量。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52077264

复制

相似问题

问如何在使用angular2选中复选框时获取该特定部分的数据
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在使用angular2选中复选框时获取该特定部分的数据EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在使用angular2选中复选框时获取该特定部分的数据
EN