Angular 如何避免离子选项/离子选择中的确定/取消按钮

嗨，如何避免离子选项中的“确定”和“取消”按钮

单击ion选项后，我需要一个输出，如下图所示

我已经按照您的要求尝试了所有选项

但我无法实现这个ui

即使在键入

interface=“action sheet”

之后，我也无法获得想要的外观

---

在哪里可以找到演示或任何帮助来获取此视图

这个问题其实是我自己需要的，我知道有些人已经需要了一段时间了。所以我希望这有帮助

选项1：包装的超级组件

首先，我们创建一个名为selectalertless的组件。 以下是具有以下选项的HTML：

<ion-select [(ngModel)]="model" #select>
    <ion-option *ngFor="let option options" [value]="option.id">{{option.name}}</ion-option>
</ion-select>

在html中的select上查找集合的实际组件类。查找选项并在单击时设置发射。因此，每当有人点击其中一个选项时，它就会消失。 打开功能仅用于在单击后解除警报

 @Component({
    templateUrl: 'select-alertless.html',
    selector: 'select-alertless',
})
export class select_alertless {
    // the options that are displayed
    @Input('options') public options: any[];
    @Input('model') public model: any;

    // the event that is to be emitted when changes occures
    @Output('change') public change: EventEmitter<any> = new EventEmitter<any>();

    // The sets here capture events and emit the data to change when its needed. It also switched the open function for our own open function so then the viewcontroller can be closed.
    @ViewChild('select') public set ex(select: any | undefined) {
        if (select === undefined) return;
        select.open = this.open;
        if (select._options === undefined) {
            Object.defineProperty(select, '_options', {
                set: (val) => {
                    select['__options'] = val;
                    val.forEach(option => option.ionSelect.subscribe(d => {
                        this.change.emit(d);
                        this.model = d;

                        select.overlay.dismiss();
                    }));
                },
                get: function () { return select['__options'] }
            })
        }
    }
    open() {
        if ((<any>this)._disabled) {
            return;
        }

        console.debug('select, open alert');

        // the user may have assigned some options specifically for the alert
        const selectOptions = deepCopy((<any>this).selectOptions);

        // make sure their buttons array is removed from the options
        // and we create a new array for the alert's two buttons
        selectOptions.buttons = [{
            text: (<any>this).cancelText,
            role: 'cancel',
            handler: () => {
                (<any>this).ionCancel.emit(null);
            }
        }];

        // if the selectOptions didn't provide a title then use the label's text
        if (!selectOptions.title && (<any>this)._item) {
            selectOptions.title = (<any>this)._item.getLabelText();
        }

        let options = (<any>this)._options.toArray();


        // default to use the alert interface
        (<any>this).interface = 'alert';

        // user cannot provide inputs from selectOptions
        // alert inputs must be created by ionic from ion-options
        selectOptions.inputs = (<any>this)._options.map(input => {
            return {
                type: ((<any>this)._multi ? 'checkbox' : 'radio'),
                label: input.text,
                value: input.value,
                checked: input.selected,
                disabled: input.disabled,
                handler: (selectedOption: any) => {
                    // Only emit the select event if it is being checked
                    // For multi selects this won't emit when unchecking
                    if (selectedOption.checked) {
                        input.ionSelect.emit(input.value);
                    }
                }
            };
        });

        var selectCssClass = 'select-alert';

        // create the alert instance from our built up selectOptions
        (<any>this).overlay = new Alert((<any>(<any>this))._app, selectOptions);

        if ((<any>this)._multi) {
            // use checkboxes
            selectCssClass += ' multiple-select-alert select-alertless';
        } else {
            // use radio buttons
            selectCssClass += ' single-select-alert select-alertless';
        }

        // If the user passed a cssClass for the select, add it
        selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
        (<any>this).overlay.setCssClass(selectCssClass);

        (<any>this).overlay.addButton({
            text: (<any>this).okText,
            handler: (selectedValues: any) => {
                (<any>this).onChange(selectedValues);
                (<any>this).ionChange.emit(selectedValues);
            }
        });


        (<any>this).overlay.present(selectOptions);

        (<any>this)._isOpen = true;
        (<any>this).overlay.onDidDismiss(() => {
            (<any>this)._isOpen = false;
        });
    }
}

@组件({
templateUrl:“选择alertless.html”，
选择器：“选择无警报”，
})
导出类选择\u无警报{
//显示的选项
@输入（“选项”）公共选项：任何[]；
@输入（“模型”）公共模型：任意；
//发生更改时要发出的事件
@输出（“更改”）公共更改：EventEmitter
您可以共享您的代码样本吗？您看到了吗？“如果选项数超过6，则即使通过了操作表，它也将使用警报界面。”@Serg Chernata如果我使用行动表，我不会看到上面的内容，因为行动表会放在页面底部，但如果看到我发布的图片，它就不一样了that@RavinSingh D如果你看官方文件中的ion select标签，这将是一个例子，因为我目前只使用它，你是说我们必须这样做吗作为一个自定义组件，如果可能的话，你能提供一个工作的plunkeri吗？我刚刚给了ion select标签，在我的app.css文件中，我添加了
。select alertless{.alert button group{display:none；}
非常感谢，我可以避免“确定”和“取消”按钮，但现在我无法在单击“离子”选项时调用该函数。我必须调用一个函数，如果没有自定义标记，可以这样做吗？您不能。必须扩展“选择”中的“打开”函数，以便在单击选项时关闭“选择”。否则，您只需在选项和选项之间单击即可d它一直显示。是的，我只想这样，但我想调用该函数，然后我可以关闭选项列表这就是我需要发生的事情。如果没有“确定/取消”按钮，则无法关闭“选择”，除非扩展它。没有该功能
 @Component({
    templateUrl: 'select-alertless.html',
    selector: 'select-alertless',
})
export class select_alertless {
    // the options that are displayed
    @Input('options') public options: any[];
    @Input('model') public model: any;

    // the event that is to be emitted when changes occures
    @Output('change') public change: EventEmitter<any> = new EventEmitter<any>();

    // The sets here capture events and emit the data to change when its needed. It also switched the open function for our own open function so then the viewcontroller can be closed.
    @ViewChild('select') public set ex(select: any | undefined) {
        if (select === undefined) return;
        select.open = this.open;
        if (select._options === undefined) {
            Object.defineProperty(select, '_options', {
                set: (val) => {
                    select['__options'] = val;
                    val.forEach(option => option.ionSelect.subscribe(d => {
                        this.change.emit(d);
                        this.model = d;

                        select.overlay.dismiss();
                    }));
                },
                get: function () { return select['__options'] }
            })
        }
    }
    open() {
        if ((<any>this)._disabled) {
            return;
        }

        console.debug('select, open alert');

        // the user may have assigned some options specifically for the alert
        const selectOptions = deepCopy((<any>this).selectOptions);

        // make sure their buttons array is removed from the options
        // and we create a new array for the alert's two buttons
        selectOptions.buttons = [{
            text: (<any>this).cancelText,
            role: 'cancel',
            handler: () => {
                (<any>this).ionCancel.emit(null);
            }
        }];

        // if the selectOptions didn't provide a title then use the label's text
        if (!selectOptions.title && (<any>this)._item) {
            selectOptions.title = (<any>this)._item.getLabelText();
        }

        let options = (<any>this)._options.toArray();


        // default to use the alert interface
        (<any>this).interface = 'alert';

        // user cannot provide inputs from selectOptions
        // alert inputs must be created by ionic from ion-options
        selectOptions.inputs = (<any>this)._options.map(input => {
            return {
                type: ((<any>this)._multi ? 'checkbox' : 'radio'),
                label: input.text,
                value: input.value,
                checked: input.selected,
                disabled: input.disabled,
                handler: (selectedOption: any) => {
                    // Only emit the select event if it is being checked
                    // For multi selects this won't emit when unchecking
                    if (selectedOption.checked) {
                        input.ionSelect.emit(input.value);
                    }
                }
            };
        });

        var selectCssClass = 'select-alert';

        // create the alert instance from our built up selectOptions
        (<any>this).overlay = new Alert((<any>(<any>this))._app, selectOptions);

        if ((<any>this)._multi) {
            // use checkboxes
            selectCssClass += ' multiple-select-alert select-alertless';
        } else {
            // use radio buttons
            selectCssClass += ' single-select-alert select-alertless';
        }

        // If the user passed a cssClass for the select, add it
        selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
        (<any>this).overlay.setCssClass(selectCssClass);

        (<any>this).overlay.addButton({
            text: (<any>this).okText,
            handler: (selectedValues: any) => {
                (<any>this).onChange(selectedValues);
                (<any>this).ionChange.emit(selectedValues);
            }
        });


        (<any>this).overlay.present(selectOptions);

        (<any>this)._isOpen = true;
        (<any>this).overlay.onDidDismiss(() => {
            (<any>this)._isOpen = false;
        });
    }
}

<ion-item>
            <ion-label>stuff</ion-label>
            <select-alertless [model]="data" item-content [options]="options" (change)="data = $event"></select-alertless>
</ion-item>

import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

import { ActionSheet, Alert, App, Config, Form, Ion, Item, NavController, Option, ViewController } from 'ionic-angular';
import { isBlank, isCheckedProperty, isTrueProperty, deepCopy } from 'ionic-angular/util/util';
import { Select as ImportSelect } from 'ionic-angular/components/select/select';


export class TempSelect extends ImportSelect {
    static decorators = undefined;
    // static propDecorators = undefined;
}

export const SELECT_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => Select),
    multi: true
};

@Component({
    selector: 'select-alertless',
    styles: ['.select-alertless .alert-button-group{display:none}'],
    template:
'<div *ngIf="!_text" class="select-placeholder select-text">{{placeholder}}</div>' +
'<div *ngIf="_text" class="select-text">{{selectedText || _text}}</div>' +
'<div class="select-icon">' +
'<div class="select-icon-inner"></div>' +
'</div>' +
'<button aria-haspopup="true" ' +
'[id]="id" ' +
'ion-button="item-cover" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' +
'class="item-cover">' +
'</button>',
host: {
        '[class.select-disabled]': '_disabled'
    },
    providers: [SELECT_VALUE_ACCESSOR],
    encapsulation: ViewEncapsulation.None,
})
export class Select extends TempSelect implements AfterContentInit, ControlValueAccessor, OnDestroy {
    public overlay: Alert;
    private __options: any;
    constructor(
        _app: App,
        _form: Form,
        config: Config,
        elementRef: ElementRef,
        renderer: Renderer,
        @Optional() public _item: Item,
        @Optional() _nav: NavController
    ) {
        super(_app, _form, config, elementRef, renderer, _item, _nav);
        this.setElementClass(`${this._componentName}-${this._mode}`, false);
    }
public set _options(val) {
    this.__options = val;
    if (!this._multi) {
        this.__options.forEach(option => {
            option.ionSelect.subscribe(selectedValues => {
                this.onChange(selectedValues);
                this.ionChange.emit(selectedValues);
                this._isOpen = false;
                this.overlay.dismiss();
            });
        });
    }
}
public get _options() {
    return this.__options;
}
open() {
    if (this._disabled) {
        return;
    }

    // the user may have assigned some options specifically for the alert
    const selectOptions = deepCopy(this.selectOptions);

    // make sure their buttons array is removed from the options
    // and we create a new array for the alert's two buttons
    selectOptions.buttons = [{
        text: this.cancelText,
        role: 'cancel',
        handler: () => {
            this.ionCancel.emit(null);
        }
    }];

    // if the selectOptions didn't provide a title then use the label's text
    if (!selectOptions.title && this._item) {
        selectOptions.title = this._item.getLabelText();
    }

    let options = this._options.toArray();


    // default to use the alert interface
    this.interface = 'alert';

    // user cannot provide inputs from selectOptions
    // alert inputs must be created by ionic from ion-options
    selectOptions.inputs = this._options.map(input => {
        return {
            type: (this._multi ? 'checkbox' : 'radio'),
            label: input.text,
            value: input.value,
            checked: input.selected,
            disabled: input.disabled,
            handler: (selectedOption: any) => {
                // Only emit the select event if it is being checked
                // For multi selects this won't emit when unchecking
                if (selectedOption.checked) {
                    input.ionSelect.emit(input.value);
                }
            }
        };
    });

    var selectCssClass = 'select-alert';

    // create the alert instance from our built up selectOptions
    this.overlay = new Alert((<any>this)._app, selectOptions);

    if (this._multi) {
        // use checkboxes
        selectCssClass += ' multiple-select-alert';
    } else {
        // use radio buttons
        selectCssClass += ' single-select-alert select-alertless';
    }

    // If the user passed a cssClass for the select, add it
    selectCssClass += selectOptions.cssClass ? ' ' + selectOptions.cssClass : '';
    this.overlay.setCssClass(selectCssClass);

    this.overlay.addButton({
        text: this.okText,
        handler: (selectedValues: any) => {
            this.onChange(selectedValues);
            this.ionChange.emit(selectedValues);
        }
    });


    this.overlay.present(selectOptions);

    this._isOpen = true;
    this.overlay.onDidDismiss(() => {
        this._isOpen = false;
    });
}

<select-alertless item-content  [(ngModel)]="data"><ion-option></ion-option></select-alertless>