Ioni c Возможность выбора, показ большого списка

Question

Итак, я использую ioni c -selectable с select multiple равным true.

Когда я закончил выбирать элемент, на веб-сайте отображается массив выбранных элементов.

Как мне настроить отображение сообщения или просто показать количество выбранных элементов вместо списка ?

введите здесь описание изображения

Я хочу "14 элементов выбрано", а не элементы

Answer 1

Самое простое решение, вы можете изменить атрибут selectedText

<ion-select multiple="true" [(ngModel)]="optionsSelected" [selectedText]="optionsSelected.length +' items selected'">

В своем файле .ts убедитесь, что вы инициализировали переменную ngModel как

optionsSelected:any =[];

Пример вывода

Do c Ссылка

ОБНОВЛЕНИЕ: -

<ionic-selectable item-content [(ngModel)]="optionsSelected" itemValueField="id" itemTextField="name" [items]="ports">
            <ng-template ionicSelectableValueTemplate let-port="value">
                {{optionsSelected.length}} &nbsp items selected
            </ng-template>
        </ionic-selectable>

Плагин Документы

Answer 2

Я сделал пример, используя Ioni c 5. Это может немного отличаться между версиями Ioni c, но если вы поняли основную идею, ее можно адаптировать для решения вашей проблемы.

Это опция позволяет вам установить все, что вы хотите, простой текст или специфику c html.

Мне нужно было найти элемент, который изменится после выбора. С помощью vanilla JavaScript я мог получить элемент и отредактировать его. Вот код фрагмента:

home.page. html

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-list-header>
        <ion-label>jps' list</ion-label>
    </ion-list-header>

    <ion-item>
        <ion-label>Multiple list</ion-label>
        <ion-select multiple="true" 
                    cancelText="Cancel" 
                    okText="Ok" 
                    (ionChange)="detectChanges(0)" 
                    [(ngModel)]="optionsSelected">
            <ion-select-option value="1">Option number 1</ion-select-option>
            <ion-select-option value="2">Option number 2</ion-select-option>
            <ion-select-option value="3">Option number 3</ion-select-option>
            <ion-select-option value="4">Option number 4</ion-select-option>
            <ion-select-option value="5">Option number 5</ion-select-option>
            <ion-select-option value="6">Option number 6</ion-select-option>
            <ion-select-option value="7">Option number 7</ion-select-option>
            <ion-select-option value="8">Option number 8</ion-select-option>
            <ion-select-option value="9">Option number 9</ion-select-option>
            <ion-select-option value="10">Option number 10</ion-select-option>
            <ion-select-option value="11">Option number 11</ion-select-option>
            <ion-select-option value="12">Option number 12</ion-select-option>
            <ion-select-option value="13">Option number 13</ion-select-option>
            <ion-select-option value="14">Option number 14</ion-select-option>
            <ion-select-option value="15">Option number 15</ion-select-option>
            <ion-select-option value="16">Option number 16</ion-select-option>
            <ion-select-option value="17">Option number 17</ion-select-option>
            <ion-select-option value="18">Option number 18</ion-select-option>
            <ion-select-option value="19">Option number 19</ion-select-option>
            <ion-select-option value="20">Option number 20</ion-select-option>
        </ion-select>
    </ion-item>
  </ion-list>
</ion-content>

home.page.ts

    optionsSelected: Array<string> = []

    constructor() {}

    // This param might be the number
    // of the ion-select as currentlly
    // appears on html page.
    //
    // Starting with the number 0
    // ```
    // <ion-select (ionChange)="detectChanges(0)">...</ion-select><!-- I'm number 0 -->
    // <ion-select (ionChange)="detectChanges(1)">...</ion-select><!-- I'm number 1 -->
    // <ion-select (ionChange)="detectChanges(n)">...</ion-select><!-- I'm number n -->
    // ```
    detectChanges(ionSelectNumber) {
        // Just for set in singular o plural word.
        let optionsCount = this.optionsSelected.length

        // Detecting on your page all ion-select tags.
        let doc = document.getElementsByTagName('ion-select')

        // This could be OPTIONAL, only use it when you're not
        // sure that you html page has ion-select components.
        if (!doc) 
            return

        // Here is where magic happens!
        // you already have the element that is displayed it
        // when a user selects any options
        // just change its innerHTML to the shadowRoot
        // because in the version of ionic implements #shadow-root
        // in its elements
        doc[ionSelectNumber].shadowRoot.innerHTML = 
            this.templateData(
                !optionsCount ? '' : optionsCount === 1 ? `${optionsCount} option` : `${optionsCount} options`
            )
    }

    templateData(customText: string) {
        // This is the structure that ionic uses
        // for ion-select in the specific
        // section you want to custom
        //
        // try to print the shadowRoot.innerHTML
        // and you'll get this text.
        return `
            <div class="select-text" part="text">${customText}</div>
            <div class="select-icon" role="presentation" part="icon">
                <div class="select-icon-inner"></div>
            </div>
            <button type="button"></button>`
    }

И это вот как это выглядит:

Выбор ионов перед выбором:

Выбор ионов после выбора: