如何获得选择文本的primeng下拉按钮点击使用angular2

我不能得到primeng下拉按钮点击选定的文本。我使用formgroup div和添加多个条目到网格。我尝试了很多，只得到选定的价值。我也需要下拉式标签。请帮助我。 HTML标记：如何获得选择文本的primeng下拉按钮点击使用angular2

<div class="row"> 
       <div class="form-group row" formGroupName="FarePaxDetails"> 
        <label for="AirportName" class="col-sm-1 control-label">Pax Type</label> 
        <div class="col-sm-1"> 
         <p-dropdown [options]="paxes" [(ngModel)]="PaxTypeId" (onChange)="ChangePaxType($event)" formControlName="PaxType"></p-dropdown> 
        </div> 
        <label for="AirportName" class="col-sm-2 control-label">Baggage Allow</label> 
        <div class="col-sm-1"> 
         <input type="text" class="form-control" formControlName="BeggageAllow" [(ngModel)]="BeggageAllow" placeholder="Baggage Allow" /> 
        </div> 
        <label for="AirportName" class="col-sm-2 control-label">Adult Fare(%)</label> 
        <div class="col-sm-1"> 
         <input type="text" class="form-control" [(ngModel)]="Percentage" formControlName="Percentage" placeholder="Adult Fare(%)" /> 
        </div> 
        <label for="AirportName" class="col-sm-1 control-label">Amount</label> 
        <div class="col-sm-1"> 
         <input type="text" class="form-control" [(ngModel)]="Amount" formControlName="Amount" placeholder="Amount" /> 
        </div> 
        <div class="col-sm-1"> 
         <button type="button" (click)="AddFarePaxType(FarePaxDetails)" pButton class="btn btn-info" label="Add"></button> 
        </div> 
       </div> 
      </div>

这里是HTML组件的代码：

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

import { TabViewModule, CheckboxModule, DropdownModule, RadioButtonModule, SelectItem, FieldsetModule } from 'primeng/primeng'; 

import { Response } from '@angular/http'; 

import { PayTypeService } from '../../Service/PaxTypeService'; 

import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; 

import { DataTableModule, SharedModule, LazyLoadEvent, DataTable, ConfirmDialogModule, ConfirmationService } from 'primeng/primeng'; 
@Component({ 

    selector: 'main-fairtype', 
    templateUrl: './mainfaretype.component.html', 
    styleUrls: ['./mainfaretype.component.css'], 
    encapsulation: ViewEncapsulation.None, 
    providers: [PayTypeService] 
}) 

export class MainFareTypeComponent {  

    paxes: SelectItem[]; 

    PaxFareTypeList: any[]; 

    public mainForm: FormGroup; 

    constructor(private PayTypeService: PayTypeService) { 
     this.mainForm = new FormGroup({ 
     FareType: new FormControl('', [Validators.required]), 
     FareColor: new FormControl(''), 
     TourCode: new FormControl('', [Validators.required]), 
     FareBasis: new FormControl('', [Validators.required]), 
     MinStay: new FormControl('', [Validators.required]), 
     MaxStay: new FormControl('', [Validators.required]), 
     TicketBefore: new FormControl('', [Validators.required]), 
     ReservationBefore: new FormControl('', [Validators.required]), 
     Restrictions: new FormControl(''), 
     FareRule: new FormControl(''), 
     FarePaxDetails: new FormGroup({ 
      PaxType: new FormControl('', [Validators.required]), 
      BeggageAllow: new FormControl('', [Validators.required]), 
      Percentage: new FormControl('', [Validators.required]), 
      Amount: new FormControl('', [Validators.required]) 
     }) 
    }); 
    this.PayTypeService.GetAllPaxes().then((data: any) => { 
     debugger 
     this.paxes = []; 
     for (var i = 0; i < data.length; i++) 
      this.paxes.push({ label: data[i].paxTypeName, value: data[i].paxTypeId }); 
    }); 
    this.PaxFareTypeList = []; 
} 
AddFarePaxType(data: any) { 
    this.PaxFareTypeList.push({ 
     PaxType: this.mainForm.controls.FarePaxDetails.get('PaxType').value, 
     Baggage: this.mainForm.controls.FarePaxDetails.get('BeggageAllow').value, 
     Percentage: this.mainForm.controls.FarePaxDetails.get('Percentage').value, 
     Amount: this.mainForm.controls.FarePaxDetails.get('Amount').value 
    }) 
}

来源

2017-06-03 Vimal Vataliya

你能给作为该组件的HTML模板的详细信息？ –

你可以给你标记吗？ –

@KetanAkbari我更新了我的问题，标记为HTML –

试试这个：

<div formGroupName="FarePaxDetails"> 
<div class="col-sm-1"> 
    <p-dropdown [options]="paxes" [(ngModel)]="PaxTypeId" (onChange)="ChangePaxType($event)" 
       formControlName="PaxType"></p-dropdown> 
</div> 
<label for="AirportName" class="col-sm-2 control-label">Baggage Allow</label> 
<div class="col-sm-1"> 
    <input type="text" class="form-control" formControlName="BeggageAllow" [(ngModel)]="BeggageAllow" 
      placeholder="Baggage Allow"/> 
</div> 
<label for="AirportName" class="col-sm-2 control-label">Adult Fare(%)</label> 
<div class="col-sm-1"> 
    <input type="text" class="form-control" [(ngModel)]="Percentage" formControlName="Percentage" 
      placeholder="Adult Fare(%)"/> 
</div> 
<label for="AirportName" class="col-sm-1 control-label">Amount</label> 
<div class="col-sm-1"> 
    <input type="text" class="form-control" [(ngModel)]="Amount" formControlName="Amount" placeholder="Amount"/> 
</div> 
<div class="col-sm-1"> 
    <button type="button" (click)="AddFarePaxType(FarePaxDetails)" pButton class="btn btn-info" 
      label="Add"></button> 
</div> 
</div>

来源

2017-06-03 12:20:18

如果我将选定的文本放入任何变量，它就可以工作。但我担心的是我不想使用onChange方法。 –

ChangePaxType（）函数有什么用？ –

我没有找到代码 –

如何获得选择文本的primeng下拉按钮点击使用angular2

回答

相关问题