如何使用 angular2 单击按钮获取 primeng 下拉列表的选定文本

Question

我无法在单击按钮时获取 primeng 下拉列表的选定文本。 我使用 formgroup 来 div 并向网格添加多个条目。 我尝试了很多，但只得到了选定的值。我还需要下拉标签。 请帮我。 HTML 标记：

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

Answer 1

我遇到了这个问题，经过几个小时的集思广益后，我使用下面的技巧修复了这个问题。

添加对下拉组件的引用，并将其传递给“onChange”事件处理程序，如下所示。

<p-dropdown #dd [options]="paxes" [(ngModel)]="PaxTypeId" (onChange)="ChangePaxType($event, dd)"
                formControlName="PaxType"></p-dropdown>

ChangePaxType(event, dd: Dropdown){
   console.log(dd.selectedOption.label) // this is your selected item label
}

这是唯一有效的方法！

Answer 2

试试这个：

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

Answer 3

尝试以下代码：

<p-dropdown [options]="paxes" (onChange)="ChangePaxType($event)"
                formControlName="PaxType"></p-dropdown>

ChangePaxType(event){
   console.log(event.originalEvent.srcElement.innerText) // this is your selected item label
}