Angular 2/4如何使用Angular typingcript傳遞/捕獲單選按鈕的值

我是Angular 2/4和typescript的新手..我想獲取爲電話，電子郵件和地址選擇的單選按鈕值並傳遞選定的內容值到打字稿頁面。 client.info.tsAngular 2/4如何使用Angular typingcript傳遞/捕獲單選按鈕的值

我該如何着手從html頁面獲取單擊打印稿中單選按鈕的值。我在下面列出了我的打字稿和html代碼。目前，這是行不通的

有人可以幫

，這裏是我的

客戶info.component.html（從JSON文件拉到數據）

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

    <!---->

客戶端代碼。 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); 
     } 

    }

來源

2017-09-12 user244394

我做這樣在我的項目

<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"/>

通過這樣ngModel將改變當u根據其輸入值

client.info.ts單擊單選按鈕，我建議你遵循規則的角命名組件這樣client-info.component.ts

在組件U類簡單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; 
    } 
}

來源

2017-09-12 13:59:39

我將如何處理client.info.ts – user244394

中的選定無線電數值作爲角度2/4最終版本使用'[value]'而不是'value ' –

你初始化radioData，但是你如何在client-info.component.ts中顯示選定的radioData值 - 謝謝 – user244394

要麼使用模板驅動窗體和[（ng-model）]並獲取複選框的「值」或使用Reactive窗體並使用form-control name屬性獲取分配給模型的輸入的值。

來源

2017-09-12 13:27:36 RRForUI

作爲角度> 2.1使用'[（ngModel）]' –

建議使用FormsModule或反應形式與表單輸入處理

FormsModule方法

添加到您的app.module.ts

import { FormsModule } from '@angular/forms'; 

@NgModule({ 
    imports:  [ BrowserModule, FormsModule ], // import forms module 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
})

然後裏面您的component.html

<div> 
    <input type="radio" name="phone" [(ngModel)]="client.homePhone" [value]="client.homePhone"> 
    {{client.homePhone}} 
</div> 

<div> 
    <input type="radio" name="phone" [(ngModel)]="client.workPhone" [value]="client.workPhone"> 
    {{client.workPhone}} 
</div>

您component.ts內通過引用所需的性能創造了client對象

ngOnInit() { 
    this.client = { 
    workPhone: '', 
    homePhone: '' 
    }; 
}

您可以使用組件內的任何地方從對象的值的模型。例如，如果您想訪問WorkPhone，請使用this.client.workPhone。

來源

2017-09-12 14:11:06

我注意到你正在使用client.homePhone你能解釋一下嗎？我通過一個for循環來使用循環

{{a.homePhone}} (Home).

從JSON填充無線電話號碼。我正在使用a.homePhone獲取值，我將如何將urs與我的相結合？ – user244394

Angular 2/4如何使用Angular typingcript傳遞/捕獲單選按鈕的值

回答

相關問題