Угловой |Ionic 3: Как скрыть и изменить ширину кнопки в зависимости от состояния?

Question

Я разрабатываю приложение для бронирования с Ionic 3 и Angular.Я использовал ion-stepper для погружения формы бронирования несколькими шагами.

Теперь моя цель - менять кнопку в зависимости от шагов.Я знаю, что через e я могу получить текущие шаги.Это мой .ts файл:

import {Component, Renderer, ViewChild, NgZone} from '@angular/core';
import {IonicPage, NavController, NavParams, AlertController, Content} from 'ionic-angular';

import {IonicStepperComponent} from 'ionic-stepper';

@IonicPage()
@Component({

    selector: 'page-add-apartment',
    templateUrl: 'add-apartment.html',
})

export class AddApartment {

    @ViewChild(Content) content: Content;
    @ViewChild('stepper') stepper: IonicStepperComponent;
    header: any;
    headerHeight: any;
    translateAmt: any;
    currentNumber = 0;

    textStep = 'Continua';

    constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController, public renderer: Renderer, public zone: NgZone) {
    }

    next() {
        this.stepper.nextStep();
    }

    previous() {
        this.stepper.previousStep();
    }

    selectChange(e) {
        console.log(e);
        if ( e === 6 )
        {
            this.textStep = 'Pubblica';
        }
    }

    decrement () {
        if(this.currentNumber>0){
            this.currentNumber--;}
    }

    increment() {
        this.currentNumber++;
    }

}

А вот мое мнение:

<ion-footer col-sm-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-6 offset-xl-3>
<ion-toolbar>
    <ion-grid class="bottom_0" no-padding>
        <ion-row>
            <ion-col class="left_xs" col-2>
                <button ion-button color="light" large (click)="previous()">
                    <ion-icon name="ios-arrow-back"></ion-icon>
                </button>
            </ion-col>
            <ion-col class="right_xs" col-10>
                <button ion-button class="btn_block" large (click)="next()">
                    {{ textStep }}
                </button>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-toolbar>

Если вы видите, у меня есть selectChange(e), который сказал мнетекущий шаг.Я знаю, что могу переключаться между шагами с помощью if ( e === numberOfPage ).

Теперь у меня вопрос, как я могу скрыть кнопку обратно в поле зрения, если e является первым шагом (только для отображения кнопки «Continua») икак я могу изменить его ширину с col-10 на col-12?

Answer 1

Используйте *ngIf="currentNumber === 1" для условного отображения / скрытия кнопки «Предыдущая»

Также для динамической установки ширины кнопки «Далее» вы можетеиспользуйте [ngStyle]:

<ion-footer col-sm-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-6 offset-xl-3>
<ion-toolbar>
    <ion-grid class="bottom_0" no-padding>
        <ion-row>
            <ion-col class="left_xs" col-2>
                <button *ngIf="currentNumber === 1" ion-button color="light" large (click)="previous()">
                    <ion-icon name="ios-arrow-back"></ion-icon>
                </button>
            </ion-col>
            <ion-col class="right_xs" col-10>
                <button ion-button [ngStyle]="{ 'width': (currentNumber === 1) ? '200px': '100px' }" class="btn_block" large (click)="next()">
                    {{ textStep }}
                </button>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-toolbar>