Angular 2/4 如何使用 Angular 打字稿传递/捕获单选按钮值 [英] Angular 2/4 How to pass/capture radio button values using Angular typescript

查看:26
本文介绍了Angular 2/4 如何使用 Angular 打字稿传递/捕获单选按钮值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是 Angular 2/4 和打字稿的新手.我想获取为电话、电子邮件和地址选择的单选按钮值,并将选定的值传递给打字稿页面.client.info.ts

如何从 html 页面获取在打字稿中单击的单选按钮的值.我在下面包含了我的打字稿和 html 代码.目前这不起作用

有人可以帮忙吗

这是我的代码

client-info.component.html(从 JSOn 文件中提取的数据)

 

<!--<div class="section-subtitle">客户信息

--><div class="message-info"><span>选择一个主要电话号码</span>

<div class="section-content"><div fxLayout="column" fxLayout.gt-xs="row" class="row"><div *ngFor="let a of clientsArray; let i = index;"><div class="group" fxLayout="row" fxLayoutAlign="center center"><!--<div fxFlex="100" class="label"><input type="radio" name="phone" checked value="{{a.homePhone}}"/>主页:</div>--><!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--><div fxFlex="100" class="data"><input type="radio" name="phone" [(ngModel)]="a.homePhone" 选中 [value]="{{a.homePhone}}"/>{{a.homePhone}}(家庭)</div>

<div class="group" fxLayout="row" fxLayoutAlign="center center"><!--<div fxFlex="100" class="label"><input type="radio" name="phone" value="{{a.workPhone}}"/>工作:</div>--><!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--><div fxFlex="100" class="data"><input type="radio" name="phone" [(ngModel)]="a.workPhone" [value]="{{a.workPhone}}"/>{{a.workPhone}}(工作)

<div class="group" fxLayout="row" fxLayoutAlign="center center"><!--<div fxFlex="100" class="label"><input type="radio" name="phone" value="{{a.mobilePhone}}"/>移动:</div>--><!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--><div fxFlex="100" class="data"><input type="radio" name="phone" [(ngModel)]="a.mobilePhone" [value]="{{a.mobilePhone}}"/>{{a.mobilePhone}}(移动)

<!--<div fxHide.gt-sm class="divider"></div>-->

<!----><!--电子邮件--><div class="section-container"><!--<div class="section-subtitle">客户信息

--><div class="message-info"><span>电子邮件地址:</span>

<div class="section-content"><div fxLayout="column" fxLayout.gt-xs="row" class="row"><div *ngFor="let a of clientsArray; let i = index;"><div class="group" fxLayout="row" fxLayoutAlign="center center"><!--<div fxFlex="100" class="label">地址1:</div>--><!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--><div fxFlex="100" class="data"><input type="radio" name="email" [(ngModel)]="a.email1" 选中 [value]="{{a.email1}}"/>{{a.email1}}</div>

<div class="group" fxLayout="row" fxLayoutAlign="center center"><!--<div fxFlex="100" class="label">地址2:</div>--><!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--><div fxFlex="100" class="data"><input type="radio" name="email" [(ngModel)]="a.email12" [value]="{{a.email2}}"/>{{a.email2}}</div>

<div class="group" fxLayout="row" fxLayoutAlign="center center"><!--<div fxFlex="100" class="label">地址3:</div>--><!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--><div fxFlex="100" class="data"><input type="radio" name="email" [(ngModel)]="a.email13" [value]="{{a.email3}}"/>{{a.email3}}</div>

<!--<div fxHide.gt-sm class="divider"></div>-->

<!----><!--地址--><div class="section-container"><!--<div class="section-subtitle">客户信息

--><div class="message-info"><span>地址:</span>

<div class="section-content"><div fxLayout="column" fxLayout.gt-xs="row" class="row"><div *ngFor="let a of clientsArray; let i = index;"><div class="group" fxLayout="row" fxLayoutAlign="center center"><!--<div fxFlex="100" class="label">地址1:</div>--><!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--><div fxFlex="100" class="data"><input type="radio" name="address" [(ngModel)]="a.address1" [value]="{{a.address1}}"/>{{a.address1}}</div>

<div class="group" fxLayout="row" fxLayoutAlign="center center"><!--<div fxFlex="100" class="label">地址2:</div>--><!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--><div fxFlex="100" class="data"><input type="radio" name="address" [(ngModel)]="a.address2" [value]="{{a.address3}}"/>{{a.address2}}</div>

<div class="group" fxLayout="row" fxLayoutAlign="center center"><!--<div fxFlex="100" class="label">地址3:</div>--><!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--><div fxFlex="100" class="data"><input type="radio" name="address" [(ngModel)]="a.address3" 选中 [value]="{{a.address3}}"/>{{a.address3}}</div>

<!--<div fxHide.gt-sm class="divider"></div>-->

<!----><!-- <div class-"btn-b"><input type="button" id="sendClientInfobtn" value=""><input type="button" id="Closebtn" value="取消">

--><!---->

client.info.component.ts

 import { Component, OnInit } from '@angular/core';从'@angular/core'导入{输入};从'app/core/service/core.service'导入{CoreService};从 '../../service/fa.service' 导入 { FaService };从app/fa/model/client-account.model"导入 { ClientAccountModel };从app/fa/model/client.model"导入 { ClientModel };@成分({选择器:'fa-edit-client-info',templateUrl: './fa-edit-client-info.component.html',styleUrls: ['./fa-edit-client-info.component.css', '../fa.css']})导出类 FaEditClientInfoListComponent 实现 OnInit {@Input() clientId: string = "";//公共 clientAccountsArray: ClientAccountModel[];//public totalAccounts: number = 0;public popUpTitle = "贷款参与者";公共clientsArray:ClientModel[] = [];public openIndex: number = -1;公共总客户数:数量 = 0;构造函数(私有核心服务:核心服务,私人 faService:FaService){}ngOnInit() {console.log("cliendid " +this.clientId);this.initData();/*************/this.client = {工作电话:this.client.workPhone,家庭电话:this.client.homePhone};/*****************/}initData(): 无效 {让 isEligible:boolean = true;this.faService.getLoanParticpantDetailsAlt(this.clientId).订阅(成功模型 =>{this.clientsArray = successModel;this.totalClients = this.clientsArray.length;},错误 =>{this.onError(错误);});}做选择():无效{this.coreService.closeModal("");}onError(错误):无效{console.log("错误!:" + 错误);}}

解决方案

我在我的项目中就是这样做的

<input type="radio" name="address" [(ngModel)]="radioData" [value]="a.workPhone"/><input type="radio" name="address" [(ngModel)]="radioData" [value]="a.workPhone"/><input type="radio" name="address" [(ngModel)]="radioData" [value]="a.workPhone"/>

这样做 ngModel 会在你点击单选按钮时根据它的输入值改变

client.info.ts 我建议你遵循 angular 规则来命名这样的组件 client-info.component.ts

在你的组件类中,你只需 delcare radioData

导出类 ClientInfoComponent 实现 OnInit {公共广播数据:任何;<--- 您的无线电数据将在点击时更新ngOnInit() {//用值初始化你的收音机this.radioData = 1;}}

I am new to Angular 2/4 and typescript.. I want to get the radio button values selected for the Phone, email and address and pass the selected values to typescript page. client.info.ts

How do I go about getting the values of the radio button clicked in typescript from html page. I have included my typescript and html code below. Currently this is not working

can someone help

here is my code for the

client-info.component.html(data pulled from JSOn file)

   <div class="section-container">
      <!--<div class="section-subtitle"> Client Information </div> -->
    <div class="message-info">
       <span>Choose a Primary Phone Number</span>
    </div>         
      <div class="section-content">
                 <div fxLayout="column" fxLayout.gt-xs="row"  class="row">                           


                             <div  *ngFor="let a of clientsArray; let i = index;" >

                                <div class="group" fxLayout="row" fxLayoutAlign="center center">
                                <!--<div fxFlex="100" class="label"><input type="radio"  name="phone"  checked value="{{a.homePhone}}"/> Home:</div>-->
                                <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>-->
                                <div fxFlex="100" class="data"><input type="radio"  name="phone"  [(ngModel)]="a.homePhone" checked [value]="{{a.homePhone}}"/> {{a.homePhone}} (Home)</div>
                                </div>
                                 <div class="group" fxLayout="row" fxLayoutAlign="center center">
                                <!--<div fxFlex="100" class="label"><input type="radio"  name="phone" value="{{a.workPhone}}"/> Work:</div>-->
                                <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>-->
                                 <div fxFlex="100" class="data"><input type="radio"  name="phone" [(ngModel)]="a.workPhone" [value]="{{a.workPhone}}"/> {{a.workPhone}} (Work)</div>
                                </div>
                                <div class="group" fxLayout="row" fxLayoutAlign="center center">
                                <!--<div fxFlex="100" class="label"><input type="radio"  name="phone" value="{{a.mobilePhone}}"/> Mobile:</div>-->
                                <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>-->
                                 <div fxFlex="100" class="data"><input type="radio"  name="phone" [(ngModel)]="a.mobilePhone" [value]="{{a.mobilePhone}}"/> {{a.mobilePhone}} (Mobile)</div>
                                </div>
                                <!--<div fxHide.gt-sm class="divider"></div>-->
                            </div>  


                  </div>     
      </div>
   </div>      

   <!---->


     <!--Email -->

   <div class="section-container">
      <!--<div class="section-subtitle"> Client Information </div> -->
    <div class="message-info">
       <span>Email Address:</span>
    </div>         
      <div class="section-content">
                 <div fxLayout="column" fxLayout.gt-xs="row"  class="row">                           

                             <div  *ngFor="let a of clientsArray; let i = index;" >

                                <div class="group" fxLayout="row" fxLayoutAlign="center center">
                                <!--<div fxFlex="100" class="label">Address 1:</div>-->
                                <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>-->
                                <div fxFlex="100" class="data"><input type="radio"  name="email"   [(ngModel)]="a.email1" checked [value]="{{a.email1}}"/>{{a.email1}}</div>
                                </div>
                                 <div class="group" fxLayout="row" fxLayoutAlign="center center">
                                <!--<div fxFlex="100" class="label">Address 2:</div>-->
                                <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>-->
                                 <div fxFlex="100" class="data"><input type="radio"  name="email"  [(ngModel)]="a.email12" [value]="{{a.email2}}"/>{{a.email2}}</div>
                                </div>
                                <div class="group" fxLayout="row" fxLayoutAlign="center center">
                                <!--<div fxFlex="100" class="label">Address 3:</div>-->
                                <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>-->
                                 <div fxFlex="100" class="data"><input type="radio"  name="email"  [(ngModel)]="a.email13" [value]="{{a.email3}}"/>{{a.email3}}</div>
                                </div>
                                <!--<div fxHide.gt-sm class="divider"></div>-->
                            </div>  


                  </div>     
      </div>
   </div>      

   <!---->



     <!--Address-->

   <div class="section-container">
      <!--<div class="section-subtitle"> Client Information </div> -->
    <div class="message-info">
       <span>Address:</span>
    </div>         
      <div class="section-content">
                 <div fxLayout="column" fxLayout.gt-xs="row"  class="row">                           

                             <div  *ngFor="let a of clientsArray; let i = index;" >

                                <div class="group" fxLayout="row" fxLayoutAlign="center center">
                                <!--<div fxFlex="100" class="label">Address 1:</div>-->
                                <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>-->
                                <div fxFlex="100" class="data"><input type="radio"  name="address"  [(ngModel)]="a.address1" [value]="{{a.address1}}"/>{{a.address1}}</div>
                                </div>
                                 <div class="group" fxLayout="row" fxLayoutAlign="center center">
                                <!--<div fxFlex="100" class="label">Address 2:</div>-->
                                <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>-->
                                 <div fxFlex="100" class="data"><input type="radio"  name="address" [(ngModel)]="a.address2" [value]="{{a.address3}}"/>{{a.address2}}</div>
                                </div>
                                <div class="group" fxLayout="row" fxLayoutAlign="center center">
                                <!--<div fxFlex="100" class="label">Address 3:</div>-->
                                <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>-->
                                 <div fxFlex="100" class="data"><input type="radio"  name="address" [(ngModel)]="a.address3" checked [value]="{{a.address3}}"/>{{a.address3}}</div>
                                </div>
                                <!--<div fxHide.gt-sm class="divider"></div>-->
                            </div>  


                  </div>     
      </div>
   </div>      

   <!---->

    <!--  <div class-"btn-b"><input type="button" id="sendClientInfobtn" value=""><input type="button" id="Closebtn" value="Cancel"> </div> -->

   <!---->

client.info.component.ts

 import { Component, OnInit }              from '@angular/core';
    import { Input }                          from '@angular/core';

    import { CoreService }                    from 'app/core/service/core.service';
    import { FaService }                      from '../../service/fa.service';
    import { ClientAccountModel } from "app/fa/model/client-account.model";
    import { ClientModel } from "app/fa/model/client.model";

    @Component({
      selector: 'fa-edit-client-info',
      templateUrl: './fa-edit-client-info.component.html',
      styleUrls: ['./fa-edit-client-info.component.css', '../fa.css']
    })
    export class FaEditClientInfoListComponent implements OnInit {
      @Input() clientId: string = "";
      // public clientAccountsArray: ClientAccountModel[];
      // public totalAccounts: number = 0;


      public popUpTitle = "Loan Particiapnts";
      public clientsArray: ClientModel[] = [];
      public openedIndex: number = -1;
      public totalClients: number = 0;



      constructor( 
        private coreService: CoreService,
        private faService: FaService
      ) { 
      }

      ngOnInit() {
        console.log("cliendid " +this.clientId);
        this.initData();

/*************/
        this.client = {
    workPhone: this.client.workPhone,
    homePhone: this.client.homePhone
  };
/***************/
      }

      initData(): void {
        let isEligible:boolean = true;
        this.faService.getLoanParticpantDetailsAlt(this.clientId)
          .subscribe(
            successModel => {
            this.clientsArray = successModel;
              this.totalClients = this.clientsArray.length;
            },
            error => {
              this.onError(error);
            }
          );
      }



      doSelect(): void {
        this.coreService.closeModal("");
      }

      onError(error): void {
        console.log("ERROR!: " + error);
      }

    }

解决方案

I'm doing like this in my projects

<input type="radio"  name="address" [(ngModel)]="radioData" [value]="a.workPhone"/>
<input type="radio"  name="address" [(ngModel)]="radioData" [value]="a.workPhone"/>
<input type="radio"  name="address" [(ngModel)]="radioData" [value]="a.workPhone"/>
<input type="radio"  name="address" [(ngModel)]="radioData" [value]="a.workPhone"/>

by doing this ngModel will be change when u click the radio button according to its input value

client.info.ts I suggest you to follow angular rules to naming component like this client-info.component.ts

In your component class u simply delcare radioData

export class ClientInfoComponent implements OnInit {
    public radioData: any; <--- your radio data will be updated when on click

    ngOnInit() {
      // initialize your radio with value
       this.radioData = 1;
    }
}

这篇关于Angular 2/4 如何使用 Angular 打字稿传递/捕获单选按钮值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆