Как реализовать события по щелчку выбора элемента в выпадающем списке - PullRequest
0 голосов
/ 05 февраля 2019

У меня есть страница с выбором категории со списком.когда я щелкаю по любому элементу из поля со списком, мне нужно получить некоторое описание этого выбранного элемента под списком.

Я не знаю, как это реализовать.

    <ion-header>
    <ion-navbar>
    <ion-title>REGISTRATION</ion-title>
    </ion-navbar>
    </ion-header>
    <ion-content>
    <h1>Step 1 : Choose the category</h1>
    <ion-item>
    <ion-label>Category</ion-label>
    <ion-select [(ngModel)]="category">
        <ion-option value="i">Individual</ion-option>
        <ion-option value="t">3rd party</ion-option>
        <ion-option value="d">Dedicated</ion-option>
    </ion-select>
    </ion-item>
    </ion-content>
    <ion-footer no-shadow class="foot">
    <ion-toolbar position="bottom">
    <button (click)="rg()" ion-button full color="primary" block>Next</button>
    </ion-toolbar>
    </ion-footer>




    import { Component } from '@angular/core';
    import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
    import { ObsAuthService } from '../../services/obs_auth.services';
    import { ConnectrgPage} from '../connectrg/connectrg';

    @Component({
    selector: 'page-connectreg',
    templateUrl: 'connectreg.html',
    providers: [ObsAuthService]
    })
    export class ConnectregPage {


    constructor(private nav: NavController, private auth: ObsAuthService,
    private alertCtrl: AlertController, private loadingCtrl: LoadingController) {}

    selectChange(e) {
        console.log(e);
    }
    public rg(){
        this.nav.push(ConnectrgPage);
    }
}

1 Ответ

0 голосов
/ 05 февраля 2019

Попробуйте

<ion-select [(ngModel)]="category" (ionChange)="selectChange(category)">
   <ion-option value="i">Individual</ion-option>
    <ion-option value="t">3rd party</ion-option>
    <ion-option value="d">Dedicated</ion-option>
</ion-select>

<div *ngIf="category==='t'">Show 3rd Party desc</div>
...